Пример работы с checkbox. Выбрать все, отменить все и получить выбранные

Пример работы checkbox. Выбрать все, отменить все и получить выбранныеВ этой статейке я покажу как можно с помощью библиотеки 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 ++;
        });
    });
});

Вот и все, оказалось все очень просто :)

Рассказать друзьям:


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*