使用jquery做复选框的全选,全不选
2020-07-14 06:14
483 查看
<script type="text/javascript">
$(function() {
$("#select").click(function() {
if(this.checked){
$("input[name=Checkbox1]").each(function() {
$(this).prop("checked", true);
});
} else {
$("input[name=Checkbox1]").each(function() {
$(this).prop("checked", false);
});
}
});
});
$(function() {
$("#select").click(function() {
if(this.checked){
$("input[name=Checkbox1]").each(function() {
$(this).prop("checked", true);
});
} else {
$("input[name=Checkbox1]").each(function() {
$(this).prop("checked", false);
});
}
});
});
</script>
<input id="select" type="checkbox" />全选
<input id="select_reverse" type="checkbox" />反选
<input name="Checkbox1" type="checkbox" />
<input name="Checkbox1" type="checkbox" />
<input name="Checkbox1" type="checkbox" />
<input name="Checkbox1" type="checkbox" />
<input name="Checkbox1" type="checkbox" />
<input name="Checkbox1" type="checkbox" />
之前一直是用attr来进行设置,但是只能操作一次全选全不选,继续操作的话就无法实现!后面用prop方法才可以持续实现。
Attribute/Property |
.attr() |
.prop() |
---|---|---|
accesskey | √ | |
align | √ | |
async | √ | √ |
autofocus | √ | √ |
checked | √ | √ |
class | √ | |
contenteditable | √ | |
draggable | √ | |
href | √ | |
id | √ | |
label | √ | |
location ( i.e. window.location ) | √ | √ |
multiple | √ | √ |
readOnly | √ | √ |
rel | √ | |
selected | √ | √ |
src | √ | |
tabindex | √ | |
title | √ | |
type | √ | |
width ( if needed over .width()) |
√ |
相关文章推荐
- 使用jquery实现 checkbox复选框全选和全不选
- 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
- 使用JQuery控制复选框checkbox全选和按钮的禁用
- 使用jQuery完成复选框的全选和全不选
- 使用jquery代码实现复选框的全选与反选
- jQuery学习(五)——使用JQ完成复选框的全选和全不选
- jquery实现复选框的全选及单选框的取值
- Jquery 复选框全选、反选
- Jquery练手 DEMO 全选 取消 反选 复选框 的实现
- jquery 实现复选框 全选/反选
- jQuery实现复选框的全选和反选:
- 使用jquery实现全选,全不选,反选功能
- jquery复选框全选,全不选
- jquery实现复选框的全选,反选,全不选
- jQuery复选框全选、不选、反选
- JavaScript 复选框全选效果&JQuery 实现简单的tab切换效果
- jQuery复选框全选按钮checkbox
- JQuery复选框的全选/全不选
- jquery 选中 全选 反选 checked(请使用prop,用attr有bug)
- jquery关于复选框的全选