javascript - Showhide div based on checkbox value - Stack Overflow

admin管理员组

文章数量:1327808

When the user checks 'student'(check-1). The 2 checkbox values are supposed to disappear and reveal a text input div. As of right now I've got the input-reveal down. But I can't seem to get the checkboxes to disappear.

I've tried:

$(function () {
  $('#check-1').change(function () {                
      $('.name').toggle(this.checked);
      $('#check-1').hide();
      $('#check-2').hide();
  }).change();
});

But that doesn't work. How do I hide the checkboxes once 'student' is checked? Any idea's?

Here is a small fiddle . Thanks for your help in advance.

When the user checks 'student'(check-1). The 2 checkbox values are supposed to disappear and reveal a text input div. As of right now I've got the input-reveal down. But I can't seem to get the checkboxes to disappear.

I've tried:

$(function () {
  $('#check-1').change(function () {                
      $('.name').toggle(this.checked);
      $('#check-1').hide();
      $('#check-2').hide();
  }).change();
});

But that doesn't work. How do I hide the checkboxes once 'student' is checked? Any idea's?

Here is a small fiddle . Thanks for your help in advance.

• javascript
• jquery

Share Improve this question Follow asked Feb 14, 2013 at 1:56 ModelesqModelesq 5,4022020 gold badges6363 silver badges8989 bronze badges 2

• Why do you hide both? – Explosion Pills Commented Feb 14, 2013 at 1:59
• You're hiding the checkboxes, but not the labels. (Is this what you're asking?) – bfavaretto Commented Feb 14, 2013 at 2:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

See the code below:

$(".my-check").change(function() {
    if ( $(this).is(':checked') ) {
        $(".my-box").show();
    } else {
        $(".my-box").hide();
    }
});

More details in: http://jsfiddle/marloscarmo/vMFQd/

wrap your textboxes with a div, say "thisWrapper"

<div id="thisWrapper">
    <input type="checkbox" id="check-1" class="checkchoice staff" required><label for="check-1" class="choice staff">Staff</label>
    <input type="checkbox" id="check-2" class="checkchoice student" required><label for="check-2" class="choice student">Student</label>
</div>

and in the change event you posted add:

  $("thisWrapper").hide();

that should hide both checkboxes at once. Of course you'll have to add a "cancel" or "Reset" button to show the checkboxes again.

or you could give the checkboxes both a new class name like "mycheckboxes" and call this:

$(".mycheckboxes").click(function() {
        $('#check-1').hide();
$("#check-2").hide();
});

* HERE"S THE FULL EXAMPLE I GOT WORKING IN FIDDLER **

Try this instead:

<div id="thisWrapper">
    <input type="checkbox" id="check-1" class="checkchoice" required><label for="check-1" class="choice staff">Staff</label>
    <input type="checkbox" id="check-2" class="checkchoice" required><label for="check-2" class="choice student">Student</label>
</div>
<div id="nameinput">
    <input type="text" placeholder="So what's your name?" />
</div>

<script>
    $(function() {

       $(".checkchoice").change(function() {
              $("#thisWrapper").hide();
               $("#nameinput").show();
       });

    });
</script>

本文标签： javascriptShowhide div based on checkbox valueStack Overflow