jquery attr（）方法实例之多选框全选

最新推荐文章于 2020-04-30 11:10:38 发布

原创最新推荐文章于 2020-04-30 11:10:38 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #attr（） #checkbox

前端同时被 2 个专栏收录

39 篇文章

订阅专栏

JavaScript

20 篇文章

订阅专栏

本文介绍了jQuery中的attr()方法，并通过实例展示了如何实现多选框的全选功能。当点击特定checkbox时，利用attr()方法获取并设置其他checkbox的checked属性，从而实现全选或取消全选的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

attr（）方法在jquery中也很常用，但它用法却有两个：

当该方法用于返回属性值，则返回第一个匹配元素的值：该例子返回img 对象的width属性

<script>
$(document).ready(function(){
	$("button").click(function(){
		alert("图片宽度: " + $("img").attr("width"));
	});
});
</script>
</head>
<body>

<img src="img_pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213">
<br>
<button>返回图片的宽度</button>

</body>

当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对：该例子设置img对象的width和height属性

<script>
$(document).ready(function(){
	$("button").click(function(){
		$("img").attr({width:"150",height:"100"});
	});
});
</script>
</head>
<body>

<img src="img_pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213">
<br>
<button>给图片设置宽度和高度属性</button>

好了，有了以上知识储备，现在可以进入正题了：给一个多选按钮设置全选（肯定是通过点击事件触发咯）

<table class="tb_03" width="100%">
		<tr>
			<th style="width: 6%;"><input type="checkbox" onclick="chosAll(this);"></th>
			<th>项目名称</th>
			<th>项目经理</th>
			<th>运输公司</th>
			<th style="width: 19%;">项目总量/总额</th>
		</tr>	
        
        <tr>
					<td align="center">
						<input type="checkbox" name="ck"/>
					</td>
...............
        </tr>
...............
</table>

table的第一行的第一个位置有一个checkbox，一个点击事件chosAll作用于它，下面是事件的函数

function chosAll(obj){
	if($(obj).attr("checked")){
		$("input[name='ck']").attr("checked",true);
	}else{
		$("input[name='ck']").attr("checked",false);
	}
}

简单解释一下上述代码：在第二行和第三行都有attr（）方法，但两个方法的具体作用不一样：$(obj).attr("checked")是获取到改checkbox的attr属性（false或者true），然后执行{ }里面的代码，给对应的（所有的）checkbox的checked属性设置true或者false。