Question

I am on jQuery 1.3.2

I need a very simple code.

I have 4 checkboxes.

One of these checkboxes is hidden.

I want that when one of the 3 visible checkboxes is clicked the hidden one will be automatically checked.

So I have

<input type="checkbox" style="display:none" id="hiddenOne">
<input type="checkbox" style="display:block" id="visible2">
<input type="checkbox" style="display:block" id="visible3">
<input type="checkbox" style="display:block" id="visible4">

So if I click on any visible2 3 or 4 the hiddenOne will be automatically checked.

Is there a way to do that in jQuery?

Thank you!

Answer 1

this will check if any of the three visible’s are checked, if any are then show the hidden one and check it.

http://jsfiddle.net/pxfunc/S6SFZ/

HTML:

<label id="hiddenLabel" style="display:none"><input type="checkbox" id="hiddenOne"> Hidden One</label>
<label><input type="checkbox" id="visible2" class="visiChk"> Visible 2</label>
<label><input type="checkbox" id="visible3" class="visiChk"> Visible 3</label>
<label><input type="checkbox" id="visible4" class="visiChk"> Visible 4</label>

jQuery:

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

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