Show/Hide a dropdown and button based on a checkbox in HTML and JQuery

Question

Im trying to show/hide a dropdown list and button in HTML but having problems trying to get it to work. So this is the HTML setup:

<td valign="top">
    <INPUT TYPE="CHECKBOX" NAME="switchBox" onClick="showHideForm(this,'extra')"> 
</td>
<div id="extra">
   <td valign="top"><form:select path="uSelectedSystemId" id="uSelectedSystemId"></form:select> </td>
   <td valign="top"><button type="button" id="fUndelete">Undelete</button</td>
</div>

and this is the function:

function showHideForm(box, id) {
    var elm = document.getElementById(id);
    elm.style.display = box.checked ? $('#uSelectedSystemId').hide() : $('#uSelectedSystemId').show();
    elm.style.display = box.checked ? $('#fUndelete').hide() : $('#fUndelete').show();
}

Nothing happens when I check the box. Any ideas on what im doing wrong? Also, are there any suggestions on how to hide the dropdown and button when the page first loads as at the moment it is showing (and I want them hidden).

Answer 1

Bit of a random mix of jQuery and javascript there. If you gave your checkbox an ID you could simply do the following

$(function(){

    $('#uSelectedSystemId').hide();  //Hide the elements onload
    $('#fUndelete').hide();          //Hide the elements onload

    $('#checkboxID').click(function(){
          if($(this).is(':checked')){
              $('#uSelectedSystemId').show();
              $('#fUndelete').show();
          } else {
              $('#uSelectedSystemId').hide();
              $('#fUndelete').hide();
          }
    });
});

The line $('#checkboxID') could be changed to this $('input[name="switchBox"]') if you didn't want to give the checkbox an ID for whatever reason.

Below is a rework of your function This will hide and show the DIV with the id of extra. The code above won't hide the div but the two elements inside. This can be easily tweaked though

//Pure javascript version
function showHideForm(box, id) {
    var elm = document.getElementById(id);
    if(box.checked){
        elm.style.display = "none";
    } else {
        elm.style.display = "";
    }
}

Answer 2

在复选框的onchange事件发生时调用函数

<INPUT TYPE="CHECKBOX" NAME="switchBox" onchange="showHideForm(this,'extra')"> 

Answer 3

Don't use mix of jQuery and pure JavaScript,

<INPUT TYPE="CHECKBOX" NAME="switchBox" style="display:none" onClick="showHideForm()">

things should work like this jQuery:

function showHideForm() {
    if($('#checkboxID').is(':checked')){
        $('#uSelectedSystemId').hide();
        $('#fUndelete').hide();
    }else {
              $('#uSelectedSystemId').show();
              $('#fUndelete').show();
    }
}

pure js:

function showHideForm(){
    if(document.getElementById('checkboxID').checked){
        document.getElementById("uSelectedSystemId").style.display="none"
        document.getElementById("fUndelete").style.display="none"
    }else{
        document.getElementById("uSelectedSystemId").style.display="block"
        document.getElementById("fUndelete").style.display="block"
    }
}