Checkbox option trick event

For example, Checkbox option trick event...

Demo


HTML

<div>
    <label>Que. 1 : Lorem Ipsum is...</label>
    <ul class="checkBoxList">
        <li class="radio-button">
            <input type="checkbox" name="ansOption" value="option-one" id="checkbox-one" data-uncheck="true" />
            <label for="checkbox-one">Option One</label>
        </li>
        <li class="radio-button">
            <input type="checkbox" name="ansOption" value="option-two" id="checkbox-two" data-uncheck="true" />
            <label for="checkbox-two">Option Two</label>
        </li>
        <li class="radio-button">
            <input type="checkbox" name="ansOption" value="option-three" id="checkbox-three" data-uncheck="true" />
            <label for="checkbox-three">Option Three</label>
        </li>
        <li class="radio-button">
            <input type="checkbox" name="ansOption" value="option-four" id="checkbox-four" data-uncheck="true"/>
            <label for="checkbox-four">Option Four</label>
        </li>
        <li class="radio-button">
            <input type="checkbox" name="ansOption" value="option-none-of-the-above" id="none-of-the-above" data-action="noneabove" />
            <label for="none-of-the-above">None of the above</label>
        </li>
    </ul>
</div>

Javascript

$(function(){
    $('[data-action="noneabove"]').click(function(){
        if($(this).is(":checked")){
           $(this).parents('.checkBoxList').find('[data-uncheck="true"]').prop('checked', false);
        }
    })
    
    $('[data-uncheck="true"]').click(function(){
        if($(this).is(":checked")){
           $(this).parents('.checkBoxList').find('[data-action="noneabove"]').prop('checked', false);
        }
    })
})
  • Share
  • Copyright 2016 by WebiBeris.com. All Rights Reserved.