Как проверить только указанные флажки с jquery?
У меня есть несколько флажков. Я хочу проверить и снять некоторые из них или все, когда я нажимаю на соответствующую кнопку.
Например, когда я нажимаю кнопку "Проверить все", я хочу проверить все кнопки. Когда я нажимаю кнопку "Мужской", я хочу установить флажки только в том случае, если "класс" равен "мужской". Когда я нажимаю на кнопку "Женский", я хочу установить флажки только в тех случаях, когда класс равен "женский". Когда я нажимаю на кнопку "Нет", я хочу установить флажки только в тех случаях, когда класс равен "нет". Как я могу сделать это с помощью jquery?
<br>
<div>
<input type="checkbox" class="check_all"> Check all
<input type="checkbox" class="check_all_females"> Females
<input type="checkbox" class="check_all_males"> Males
<input type="checkbox" class="check_all_none"> None
</div>
<input type="checkbox" class='male'> John<BR>
<input type="checkbox" class='male'> Maria<BR>
<input type="checkbox" class='male'> Ali<BR>
<input type="checkbox" class='male'> Tural<BR>
<input type="checkbox" class='female'> John<BR>
<input type="checkbox" class='female'> Fuass<BR>
<input type="checkbox" class='female'> Jadsa<BR>
<input type="checkbox" class='none'> Dasda<BR>
<input type="checkbox" class='none'> Wers<BR>
<input type="checkbox" class='none'> Saqa<BR>
1 ответ
Решение
Сделай это:
$(function(){
$("div.mains input:checkbox").click(function(){
var rel = $(this).attr("rel"),
checked = $(this).is(":checked");
switch(rel)
{
case "all":
if(!checked)
{
$(".sub input:checkbox").removeAttr("checked");
}
else
{
$(".sub input:checkbox").attr("checked", "checked");
}
break;
default:
if(!checked)
{
$(".sub input." + rel).removeAttr( "checked");
}
else
{
$(".sub input." + rel).attr( "checked", "checked");
}
}
});
});
HTML
<br>
<div class="mains">
<input type="checkbox" rel="all" class="check_all"> Check all
<input type="checkbox" rel="female" class="check_all_females"> Females
<input type="checkbox" rel="male" class="check_all_females"> Males
<input type="checkbox" rel="none" class="check_all_females"> None
</div>
<div class="sub">
<input type="checkbox" class='male'> John<BR>
<input type="checkbox" class='male'> Maria<BR>
<input type="checkbox" class='male'> Ali<BR>
<input type="checkbox" class='male'> Tural<BR>
<input type="checkbox" class='female'> John<BR>
<input type="checkbox" class='female'> Fuass<BR>
<input type="checkbox" class='female'> Jadsa<BR>
</div>
Попробуйте эту скрипку: http://jsfiddle.net/2R2CC/