选中/取消选中jQuery中的所有复选框 [英] Check/Uncheck all the checkboxes in jQuery
本文介绍了选中/取消选中jQuery中的所有复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对jQuery没有足够的了解，我还需要一个名为全选"的复选框.当我选择此复选框时，必须选中HTML页面中的所有复选框.我该怎么办?
I have not enough knowledge about jQuery,I need one more checkbox by the name "select all". When I select this checkbox all checkboxes in the HTML page must be selected. How can I do this?
我正在使用以下代码，但效果不佳:
I am using below code but it does not works fine :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listbox.css" />
<script src="jquery-2.1.1.min.js"></script>
<script>
// Listen for click on toggle checkbox
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
}
});
</script>
</head>
<body>
<label for="blah">item-1</label> <input name="checkbox-1" id="checkbox-1" type="checkbox" />
<br />
<input type="checkbox" name="select-all" id="select-all" />
</body>
</html>
我已经从打击链接下载了jQ:
I've download jQ from blow link :
下载压缩的生产版jQuery 2.1.1
Download the compressed, production jQuery 2.1.1
http://code.jquery.com/jquery-2.1.1. min.js
推荐答案
<ul>
<li><label>item-1</label><input name="checkbox-1" id="checkbox-1" type="checkbox" class="checkitem" /></li>
<li><label>item-1</label><input name="checkbox-2" id="checkbox-2" type="checkbox" class="checkitem" /></li>
<li><label>item-1</label><input name="checkbox-3" id="checkbox-3" type="checkbox" class="checkitem" /></li>
<li><label>item-1</label><input name="checkbox-4" id="checkbox-4" type="checkbox" class="checkitem" /></li>
</ul>
<input type="checkbox" name="select-all" id="select-all" /> Check all
<script>
$(document).ready(function() {
$('#select-all').click(function(event) {
if(this.checked) {
$('.checkitem').each(function() {
this.checked = true;
});
}else{
$('.checkitem').each(function() {
this.checked = false;
});
}
});
});
</script>
这篇关于选中/取消选中jQuery中的所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
