Show/Hide with Checkbox using jQuery

Question

I am trying to have a section of an html form to show/hide based on a checkbox. This is the essence code I have:

<script src="/js/jquery.js"></script>
<script language="JavaScript">
    function toggle(className){
        var $input = $(this);
        if($(this).prop('checked'))
            $(className).show();
        else
            $(className).hide();
        }
</script>

<fieldset><legend>Check Here
    <input type="checkbox" onclick="toggle('.myClass')" ></legend>
    <span class="myClass">
        <p>This is the text.</p>
    </span>
</fieldset>

When you click on the checkbox, the span gets hidden and will not come back. I have also used $(this).is(':checked'). It appears that $(this).prop('checked') is evaluating to false whether it is checked or not. My best guess is that I am using $(this) incorrectly. What am I missing here?

Try: toggle(this,'.myClass')

Diodeus - James MacFarlane
– Diodeus - James MacFarlane

2013-04-02 14:36:27 +00:00
Commented Apr 2, 2013 at 14:36 — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Apr 2, 2013 at 14:36

palaѕн · Accepted Answer · 2018-02-05 11:53:15Z

22

HTML, pass this from on click event

<input type="checkbox" onclick="toggle('.myClass', this)" ></legend>

JS

function toggle(className, obj) {
    var $input = $(obj);
    if ($input.prop('checked')) $(className).hide();
    else $(className).show();
}

OR, without using prop you can just do:

function toggle(className, obj) {
    if ( obj.checked ) $(className).hide();
    else $(className).show();
}

OR, in one-line using .toggle( display ):

function toggle(className, obj) {
    $(className).toggle( !obj.checked )
}

edited Feb 5, 2018 at 11:53

answered Apr 2, 2013 at 14:36

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adeneo · Accepted Answer · 2013-04-02 14:36:24Z

8

Use an event handler that is'nt inline, and then just toggle() the element based on the checkbox state :

<script src="/js/jquery.js"></script>
<script type="text/javaScript">
    $(function() {
        $('input[type="checkbox"]').on('change', function() {
            $(this).closest('fieldset').find('.myClass').toggle(!this.checked);
        });
    });
</script>

<fieldset>
    <legend>Check Here<input type="checkbox"></legend>
    <span class="myClass">
        <p>This is the text.</p>
    </span>
</fieldset>

FIDDLE

This would even work with several fieldset's with the same markup.

answered Apr 2, 2013 at 14:36

adeneo

319k29 gold badges410 silver badges392 bronze badges

1 Comment

Andrew Over a year ago

This is probably the 'best' answer in general, but it is a little above my skill level; I try only to use coding that I understand.

kpull1 · Accepted Answer · 2013-04-02 14:39:42Z

7

try binding event via jQuery, and then you can access to $(this):

$(document).ready(function() {
  $(":checkbox").click(function(event) {
    if ($(this).is(":checked"))
      $(".myClass").show();
    else
      $(".myClass").hide();
  });
});

answered Apr 2, 2013 at 14:39

kpull1

1,66315 silver badges19 bronze badges

Comments

vikas pandey · Accepted Answer · 2022-03-27 07:40:30Z

-1

<input type="checkbox" checked>
<input type="text" id="amount">

$document.ready(function() {
 $("input:checked").on("click",function () {
   $("#amount").toggle()
 })
});

answered Mar 27, 2022 at 7:40

vikas pandey

172 bronze badges

Collectives™ on Stack Overflow

Show/Hide with Checkbox using jQuery

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related