Show/Hide with Checkbox using jQuery

checkbox, javascript, jquery, show-hide

Solution

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

Problem

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?

Original source