В этой статейке я покажу как можно с помощью библиотеки jQuery работать с чекбоксами. А именно выбрать все, отменить все и получить номера выбранных checkbox`ов.
Для начала, давайте выведем на страницу пять чекбоксов и три кнопки — «Снять все чекбоксы», «Выбрать все чекбоксы» и «Получить номера выбранных». Html код будет выглядеть так:
<div id="work_div"> <input type="checkbox" id="checkbox" checked="checked" /> <input type="checkbox" id="checkbox"/> <input type="checkbox" id="checkbox" checked="checked"/> <input type="checkbox" id="checkbox"/> <input type="checkbox" id="checkbox"/> <br/> <input type="button" id="checkbox_cancel" value="Снять все чекбоксы" /><br/> <input type="button" id="checkbox_check" value="Выбрать все чекбоксы" /><br/> <input type="button" id="checkbox_get" value="Получить номера выбранных" /> </div>
Теперь давайте напишем код, для обработки кнопок:
$(document).ready(function(){ // выбрать все checkbox`ы $('#checkbox_cancel').click(function(){ $('input#checkbox').each(function(){ $(this).attr('checked', false); }); }); // отменить все checkbox`ы $('#checkbox_check').click(function(){ $('input#checkbox').each(function(){ $(this).attr('checked', true); }); }); // получить номера выбранных checkbox`ов $('#checkbox_get').click(function(){ var num = 1; $('input#checkbox').each(function(){ if($(this).prop("checked")){ alert(num); } num ++; }); }); });
Вот и все, оказалось все очень просто :)