这篇文章主要介绍如何实现Jquery多选框功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Jquery多选框的基本操作:支持全选、反选、取消全选的功能HTML正文:<inpu
这篇文章主要介绍如何实现Jquery多选框功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
Jquery多选框的基本操作:支持全选、反选、取消全选的功能
HTML正文:
<input type="checkbox" id="c1">全选/全不选<br>
兴趣爱好:<br>
<input type="checkbox" name="interst" value="basketball">篮球
<input type="checkbox" name="interst" value="football">足球
<input type="checkbox" name="interst" value="bedminton">羽毛球<br>
<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="全不选">
<input type="button" id="b3" value="反选">
<input type="button" id="b4" value="显示">
javascript操作代码:
$("#c1").click(function(){
if(this.checked){
$("input[name='interst']").attr("checked","checked");
}else{
//$("input[name='interst']").attr("checked",""); //等价于
$("input[name='interst']").removeAttr("checked");
}
});
$("#b1").click(function(){
$("input[name='interst']").attr("checked","checked");
});
$("#b2").click(function(){
$("input[name='interst']").attr("checked","");
});
$("#b3").click(function(){
$("input[name='interst']").each(function(){
if(this.checked){
this.checked="";
}else{
this.checked="checked";
}
});
});
$("#b4").click(function(){
$("input[name='interst']:checked").each(function(){
alert(this.value);
});
});
效果:
以上是“如何实现jQuery多选框功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网VUE频道!
--结束END--
本文标题: 如何实现jQuery多选框功能
本文链接: https://www.lsjlt.com/news/70866.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0