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.
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')" />
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";
}
}