全部のチェックボックスにチェックする/全て外す、を可能にする

Ads

Result

jQuery

$('.select-all').live('click', function(){
    $(this).closest('.options').find('input[type=checkbox]').prop('checked', true);
    return false;
});
 
$('.reset-all').live('click', function(){
    $(this).closest('.options').find('input[type=checkbox]').prop('checked', false);
    return false;
});

html

<ul>
        <li class="select-all">Select All</li>
        <li class="reset-all">Reset All</li>
    </ul>
 
    <input type="checkbox" id="option1" /><label for="option1">Option 1</label><br />
    <input type="checkbox" id="option2" /><label for="option2">Option 2</label><br />
    <input type="checkbox" id="option3" /><label for="option3">Option 3</label><br />
    <input type="checkbox" id="option4" /><label for="option4">Option 4</label>
</div>

via

web development blog

タイトルとURLをコピーしました