多个复选框使用jQuery选择/取消选择 [英] Multiple Checkbox Select/Deselect using jQuery
本文介绍了多个复选框使用jQuery选择/取消选择的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<！DOCTYPE html>
< html xmlns =http://www.w3.org/1999/xhtml>
< head> ;
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js> < / script>
< title>多个复选框选择/取消选择 - DEMO< / title>
< / head>
< body>
多个复选框选择/取消选择 - DEMO
< br $>| < input type =按钮id =CheckedAllvalue =全部检查/> | < input type =buttonid =UncheckedAllvalue =Uncheck All/> | |
| < input id =selectall type =复选框> | 手机 | 评级 |
|---|---|---|
| < input class = casename =casevalue =1type =checkbox> | BlackBerry Bold 9650 | 2/5 |
| < input class =casename =casevalue =2type =checkbox> | Samsung Galaxy | 3.5 / 5 |
| < input class =casename =casevalue =3type =checkbox> | Droid X | 4.5 / 5 |
| < input class =casename =casevalue = 4type =c heckbox> | HTC Desire | 3/5 |
| < input class =case name =casevalue =5type =checkbox> | Apple iPhone 4 | 5/5 |
| < input type =buttonid =submitvalue =Remove/> |
< / body>
< / html>
< script language = javascript>
$（function（）{
$（＃selectall）。click（function（）{
$ （'.case'）。attr（'checked'，this.checked）;
}）;
$（。case ）.click（function（）{
if（$（。case）。length == $（。case：checked）。length）
{
$（＃selectall）。attr（选中，选中）;
}
else {
$（＃selectall）。removeAttr（checked）;
}
}）;
$（'＃CheckedAll'）。click（function（）{
$（'＃selectall'）。attr（'checked'，true）;
$（'。case'）。attr（'checked'，true）;
}）
$（'＃UncheckedAll'） .click（function（）{
$（'＃selectall'）。attr（'checked'，false）;
$（'。case'）。attr（ 'check'，false）;
}）
$ （'#submit'）。click（function（）{
if（$（'。case：checked'）。length）{
var chkId ='';
$（'。case：checked'）。each（function（）{
chkId + = $（this）.val（）+，;
}）;
chkId = chkId.slice（0，-1）;
alert（chkId）;
}
else {
alert（'Nothing Selected'）;
}
}）;
}）;< / script>
解决方案
（function（）{
（＃selectall）。click（func （）{blockquote>（'。case'）。attr（'checked'，this.checked）;
}）;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Multiple Checkbox Select/Deselect - DEMO</title>
</head>
<body>
Multiple Checkbox Select/Deselect - DEMO
| <input type="button" id="CheckedAll" value="Check All" /> | <input type="button" id="UncheckedAll" value="Uncheck All" /> | |
| <input id="selectall" type="checkbox"> | Cell phone | Rating |
|---|---|---|
| <input class="case" name="case" value="1" type="checkbox"> | BlackBerry Bold 9650 | 2/5 |
| <input class="case" name="case" value="2" type="checkbox"> | Samsung Galaxy | 3.5/5 |
| <input class="case" name="case" value="3" type="checkbox"> | Droid X | 4.5/5 |
| <input class="case" name="case" value="4" type="checkbox"> | HTC Desire | 3/5 |
| <input class="case" name="case" value="5" type="checkbox"> | Apple iPhone 4 | 5/5 |
| <input type="button" id="submit" value="Remove" /> |
</body>
</html>
<script language="javascript">
$(function () {
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
$(".case").click(function () {
if ($(".case").length == $(".case:checked").length)
{
$("#selectall").attr("checked", "checked");
}
else {
$("#selectall").removeAttr("checked");
}
});
$('#CheckedAll').click(function () {
$('#selectall').attr('checked', true);
$('.case').attr('checked', true);
})
$('#UncheckedAll').click(function () {
$('#selectall').attr('checked', false);
$('.case').attr('checked', false);
})
$('#submit').click(function () {
if ($('.case:checked').length) {
var chkId = '';
$('.case:checked').each(function () {
chkId += $(this).val() + ",";
});
chkId = chkId.slice(0, -1);
alert(chkId);
}
else {
alert('Nothing Selected');
}
});
});</script>
解决方案
(function () {
("#selectall").click(function () {
('.case').attr('checked', this.checked);
});
这篇关于多个复选框使用jQuery选择/取消选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
