CODEWITHSUNDEEP
jqueryforms
Jeremy Collins
Jeremy Collins

Reputation: 71

How to remove check from checkbox when input element is hidden?

I have a checkbox that reveals additional options when checked, via the function below. The trouble is that if the revealed checkboxes are selected, they remain selected even after being hidden. How can I best bind the deselecting of checkboxes with the same function as them being hidden?

This is one of many similar hide-unhide groupings. Any help is appreciated! Thank you everyone

Please note that I am doing this within a system where I can't add or change any HTML IDs or classes, which is why there is a big pile of selected items.

$("input[id='form_0009_fld_5-0']").click(function() {
    if( $(this).is(':checked')) {
        $("input[name='form_0009_fld_6-0'],label[for='form_0009_fld_6-0'],input[name='form_0009_fld_6-1'],label[for='form_0009_fld_6-1'],input[name='form_0009_fld_6-2'],label[for='form_0009_fld_6-2'],input[name='form_0009_fld_6-3'],label[for='form_0009_fld_6-3'],input[name='form_0009_fld_6-4'],label[for='form_0009_fld_6-4'],input[name='form_0009_fld_6-5'],label[for='form_0009_fld_6-5'],input[name='form_0009_fld_6-6'],label[for='form_0009_fld_6-6']").closest('.formField').show();
    } else {
        $("input[name='form_0009_fld_6-0'],label[for='form_0009_fld_6-0'],input[name='form_0009_fld_6-1'],label[for='form_0009_fld_6-1'],input[name='form_0009_fld_6-2'],label[for='form_0009_fld_6-2'],input[name='form_0009_fld_6-3'],label[for='form_0009_fld_6-3'],input[name='form_0009_fld_6-4'],label[for='form_0009_fld_6-4'],input[name='form_0009_fld_6-5'],label[for='form_0009_fld_6-5'],input[name='form_0009_fld_6-6'],label[for='form_0009_fld_6-6']").closest('.formField').hide();
        }
});

Upvotes: 0

Views: 231

Answers (2)

adeneo
adeneo

Reputation: 318212

The attributes selector can match "starts with", "ends with", and a lot of other options, so there's no need to type in a bunch of similar selectors like that?

To set the checkboxes to "unchecked", you'd use prop('checked', false) if the checkbox that was initially toggled is not checked etc, and using the change event is probably better than a click event :

$("input[id^='form_0009_fld_5']").on('change', function() {
    var elems = $('input[name^="form_0009_fld_6"]'),
        state = this.checked;

    elems.closest('.formField').toggle(state);

    if (!state) elems.prop('checked', false);
});

Upvotes: 1

Jaaromy Zierse
Jaaromy Zierse

Reputation: 569

Jquery allows you to chain functions so you can add on to the end of the hide.

For example:

$('longselector').closest('.formField').hide().attr("checked", false);

And with the rest of your code.

$("input[id='form_0009_fld_5-0']").click(function() {
    if( $(this).is(':checked')) {
        $("input[name='form_0009_fld_6-0'],label[for='form_0009_fld_6-0'],input[name='form_0009_fld_6-1'],label[for='form_0009_fld_6-1'],input[name='form_0009_fld_6-2'],label[for='form_0009_fld_6-2'],input[name='form_0009_fld_6-3'],label[for='form_0009_fld_6-3'],input[name='form_0009_fld_6-4'],label[for='form_0009_fld_6-4'],input[name='form_0009_fld_6-5'],label[for='form_0009_fld_6-5'],input[name='form_0009_fld_6-6'],label[for='form_0009_fld_6-6']").closest('.formField').show();
    } else {
        $("input[name='form_0009_fld_6-0'],label[for='form_0009_fld_6-0'],input[name='form_0009_fld_6-1'],label[for='form_0009_fld_6-1'],input[name='form_0009_fld_6-2'],label[for='form_0009_fld_6-2'],input[name='form_0009_fld_6-3'],label[for='form_0009_fld_6-3'],input[name='form_0009_fld_6-4'],label[for='form_0009_fld_6-4'],input[name='form_0009_fld_6-5'],label[for='form_0009_fld_6-5'],input[name='form_0009_fld_6-6'],label[for='form_0009_fld_6-6']").closest('.formField').hide().attr("checked", false);
        }
});

Upvotes: 1

Related Questions