SO - 22160945

by Arun P Johny

HTML

<form method="get">
    <ul>
        <li class="check"> <input type="checkbox" name="cause1" value="cause1" class="cause1"/>check 1</li> 
        <li class="check"> <input type="checkbox" name="cause3" value="cause3" class="cause2"/> check 2</li> 
        <li class="check"> <input type="checkbox" name="cause4" value="cause4" class="cause3"/>check 3</li> 
        <li class="check"> <input type="checkbox" name="cause5" value="cause5" class="cause4"/> check 4</li>               
        <li class="check"> <input type="checkbox" name="cause6" value="cause6" class="cause5"/> check 5</li> 
    </ul>
</form>

JavaScript

jQuery(function ($) {
    $('.check').click(function (e) {
        //ignore the click on the input element else the default behavior and manual toggle will negate each other
        if (e.target.tagName != 'INPUT') {
            $(this).find('input').prop('checked', function (i, checked) {
                return !checked
            });
        }
    });
});