Home/ Questions/Q 5956107
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T18:12:33+00:00

I’m just getting started with JQuery and am stumped. I want a series of

  • 0

I’m just getting started with JQuery and am stumped. I want a series of input checkboxes, that when checked, display/hide the adjacent textboxes. I’ve gotten part of the logic but as you can probably tell, checking any one of the checkboxes, hides/displays ALL of the textboxes. How can I make each checkbox only affect the contents of the div that is directly below it? I don’t want to write a separate function for each checkbox.

<script type="text/javascript">                                            
$(document).ready(function() {

   $(":checkbox").click(function(){
        if ($(":checkbox").is(":checked")) {
                $(".optionalinfo").show("fast");}
        else {      
                $(".optionalinfo").hide("fast");}
        });
});

 </script>   

 </head>                                                                 
 <body>                                                                  

<input id="chk1" type="checkbox">Hide/Show text1</input>
<div class="optionalinfo">
<input id="text1" type="text"></input>
</div>
<br>

<input id="chk2" type="checkbox">Hide/Show text2</input>                       
<div class="optionalinfo">
<input id="text2" type="text"></input>
</div>
<br>

<input id="chk3" type="checkbox">Hide/Show text3</input>                       
<div class="optionalinfo">
<input id="text3" type="text"></input>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To show the div adjacent to the checkbox:

    $('input:checkbox').click(
    function()
        $(this).next('.optionalinfo').show();
    });

    JS Fiddle demo

    To make the checkbox a toggle:

    $('input:checkbox').click(
    function() {
        $(this).next('.optionalinfo').toggle();
    });

    JS Fiddle demo

    • 0