javascript - ShowHide a dropdown and button based on a checkbox in HTML and JQuery - Stack Overflow

admin管理员组

文章数量:1401149

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).

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).

• javascript
• jquery
• html
• input
• checkbox

Share Improve this question Follow edited Mar 20, 2014 at 10:22 Mark Walters 12.4k66 gold badges3535 silver badges4848 bronze badges asked Mar 12, 2013 at 10:31 maloneymaloney 1,66333 gold badges2626 silver badges5151 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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 = "";
    }
}

call the function upon onchange event of the checkbox

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

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"
    }
}

本文标签： javascriptShowHide a dropdown and button based on a checkbox in HTML and JQueryStack Overflow