OnClicking Checkbox display a Hidden Select Box-CodePudding

I basically want to show a Hidden Select Box when a particular checkbox is checked.

This is my checkbox HTML;

<input type="checkbox" class="defaulter_checkbox" name="defaulter" value="1" onclick="show_defaulter_div(box, \'show_defaulter_div\')" />

and this is the Hidden Select Box HTML;

<span id="show_defaulter_div" style="display: none;"> x <select name="defaulter_month" class="small_input_box">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select></span>

The JavaScript Function code I am using is this;

function show_defaulter_div(box, show_defaulter_div)
{
    var deF = document.getElementById(show_defaulter_div);
    if(box.checked)
    {
        deF.style.display = "";
    }
    else
    {
        deF.style.display = "none";
    }
}

Please help.

CodePudding user response：

Something like this,

<input type="checkbox" class="defaulter_checkbox" name="defaulter" value="1" onclick="show_defaulter_div(this)" />

And, In Javascript,

 function show_defaulter_div(checkbox) {
  var deF = document.getElementById("show_defaulter_div");

  if (checkbox.checked) {
    deF.style.display = "";
  } else {
    deF.style.display = "none";
  }
}

CodePudding user response：

You only need to change the input to

<input type="checkbox" class="defaulter_checkbox" name="defaulter" checked="checked" onchange="show_defaulter_div(this, 'show_defaulter_div')" />