lundi 19 juin 2017

If 4 specific checkboxes are selected, then unselect them and select only the "all items" one

Now I have this form

<ul>
<li>
    <label>
        <input name="INTERESTS" type="checkbox" value="a" id="all"><span>All items</span>
    </label>  
</li>
<li>
    <label>
        <input name="INTERESTS" type="checkbox" value="b" id="1"> <span>Item 1</span>
    </label>
</li>
<li>
    <label>
        <input name="INTERESTS" type="checkbox" value="c" id="2"> <span>Item 2</span>
    </label>
</li>
<li>
    <label>
        <input name="INTERESTS" type="checkbox" value="d" id="3"> <span>Item 3</span>
    </label>
</li>
<li>
    <label>
        <input name="INTERESTS" type="checkbox" value="e" id="4"> <span>Item 4</span>
    </label>
</li>  
</ul>

And this javascript

var $others = $('input[name="INTERESTS"]').not('#all')
$('#all').change(function () {
    if (this.checked) {
        $others.prop('checked', false)
    }
});
$others.change(function () {
    if (this.checked) {
        $('#all').prop('checked', false)
    }
})

Test it at jsfiddle

If the "all items" checkbox is selected then the others are unselected. It works great, but now I need that if all items are selected (Item 1 to Item 4), then unselect them and select only the "all items" checkbox. Any thoughts on this?

Thanks!!!




Aucun commentaire:

Enregistrer un commentaire