CODEWITHSUNDEEP
javascriptjquery
Rocco The Taco
Rocco The Taco

Reputation: 3777

jQuery uncheck all checkboxes

I've got the following jQuery script correctly displaying and checking two hidden checkboxes. The only problem is that I'm trying to hide both of these checkboxes but when I uncheck my visible checkbox they remain checked?

<input type="checkbox" name="JobType[]" class="visiChk" id="nineteen" value="19" <?php echo (isset($_GET["JobType"]) && !empty($_GET["JobType"]) && in_array("19", $_GET["JobType"])) ? "checked": ""; ?> /> Plumbing
<label id="hiddenLabel" style="display:none">
<input type="checkbox" name="JobType[]" class="visiChk" id="seventeen" value="17" <?php echo (isset($_GET["JobType"]) && !empty($_GET["JobType"]) && in_array("17", $_GET["JobType"])) ? "checked": ""; ?> /> Plumbing
<input type="checkbox" name="JobType[]" class="visiChk" id="eighteen" value="18" <?php echo (isset($_GET["JobType"]) && !empty($_GET["JobType"]) && in_array("18", $_GET["JobType"])) ? "checked": ""; ?> /> Plumbing
</label>
    <script>
    // update if any are checked/unchecked
$('.visiChk').change(function() {
    var hiddenLabel = $('#hiddenLabel')[0];
    var seventeen = $('#seventeen')[0];
    var eighteen = $('#eighteen')[0];

    // Are any of them checked ?
    if ($('.visiChk:checked').length > 0) {
        hiddenLabel.style.display = 'block';
        seventeen.checked = true;
        eighteen.checked = true;
    } else  {
        hiddenLabel.style.display = 'none';
        seventeen.checked = false;
        eighteen.checked = false;
    }
});</script>

Upvotes: 1

Views: 120

Answers (1)

sm1215
sm1215

Reputation: 436

There's a logical error occurring here that might not be readily obvious with the hidden fields. When you are checking to see if any of the checkboxes are marked, you're checking all of them, even the hidden ones.

So, walk through the cycle once more. The page loads, no checkboxes have been checked. A user checks the visible one. All three are checked. The user then unchecks only the visible one. Your logic check here

if ($('.visiChk:checked').length > 0) {

is looking at all three of them. Are there any checked? Yes, the two hidden ones still are! So, all three will be set to checked again. You'll need a way to only look at the visible checkbox and then update the invisible ones accordingly. A unique ID or different class would work well.

I wrote up an example jsfiddle that helps to illustrate what's going on. Instead of hiding the checkboxes, I set the font color to grey to show which ones should actually be hidden.

https://jsfiddle.net/sm1215/d9geaog4/1/

Edit: Also, I set up a console log to show the result of the logic check going on. When the page first loads (no checkboxes are checked) and the user checks one, it evaluates to 1. Uncheck the visible one, and it evaluates to 2 - showing the 2 hidden checkboxes are still being counted.

Edit 2: Here's the code from the jsfiddle for reference in case the fiddle is ever lost.

HTML

<input type="checkbox" name="JobType[]" id="nineteen" class="visiChk" value="19"  /> Plumbing
<label id="hiddenLabel" style="color:silver; /*display:none*/">
    <input type="checkbox" name="JobType[]" class="visiChk" id="seventeen" value="17" /> Plumbing
    <input type="checkbox" name="JobType[]" class="visiChk" id="eighteen" value="18" /> Plumbing
</label>

JS

// update if any are checked/unchecked
$('.visiChk').change(function() {
    var hiddenLabel = $('#hiddenLabel')[0];
    var seventeen = $('#seventeen')[0];
    var eighteen = $('#eighteen')[0];

    // Are any of them checked ?
    console.log($('#nineteen:checked').length);

    if ($('#nineteen:checked').length > 0) {
        hiddenLabel.style.display = 'block';
        seventeen.checked = true;
        eighteen.checked = true;
    } else {
        // Commenting this out so the hidden fields stay visible for demo purposes
        //hiddenLabel.style.display = 'none'; 
        seventeen.checked = false;
        eighteen.checked = false;
    }
});

Upvotes: 1

Related Questions