Выделяем несколько checkbox-ов сразу JQuery

Хотел бы поделиться решением выделения нескольких checkbox-ов методом выделения одного выбранного. Будем использовать библиотеку JQuery. Скрипт короткий и думаю будет всем понятен.

Подключаем скрипт JQuery.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#main").click( function() {
if($('#main').attr('checked')){
$('.cb').attr('checked', true);
} else {
$('.cb').attr('checked', false);
}
});
});
</script>

Как это работает. При выделении одного чекбокса, другие выделяются по его подобию по классу .cb .

Пример формы:

Картинка <input class="cb" name="picture1" type="checkbox" value="1" />
Картинка <input class="cb" name="picture1" type="checkbox" value="1" />
Картинка <input class="cb" name="picture1" type="checkbox" value="1" />
Картинка <input class="cb" name="picture1" type="checkbox" value="1" />
Картинка <input class="cb" name="picture1" type="checkbox" value="1" />
Картинка <input class="cb" name="picture1" type="checkbox" value="1" />
Картинка <input class="cb" name="picture1" type="checkbox" value="1" />
Картинка <input class="cb" name="picture1" type="checkbox" value="1" />

Основной же должен выглядеть так

Выделить все <input class="main" name="all" type="checkbox" value="1" />

 

Поделиться в соц. сетях

Другое из текущей категории:

2 Replies to “Выделяем несколько checkbox-ов сразу JQuery”

  1. А подскажите как сделать чтобы этот скрипт ещё и значения чекблкслв в БД изменял, ну если отмечен, в БД поставить 1, если убрать, в БД поставить 2. Это мжно сделать без использования кнопок?

  2. Да, можно
    Для этого используйте Ajax

    что то типа такого

    $(«.cb»).click(function(){
    var value = $(this).attr(«value»);
    var id = $(this).attr(«id»);
    $.ajax({
    type: «POST»,
    url: «ajax.php»,
    data: «id=» + id + «value=» + value,
    success: function(msg){
    alert( «Data Saved: » + msg );
    }
    });

    });

    А в файле ajax.php выполняете запросы к базе данных и все.
    Еще нужно добавить в ваш инпут поле атрибут id чтобы получать его для обновления строки в БД
    Примерно так ..не проверял но должно работать.
    Удачи!

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