基于复选框demo(分享)
更新时间：2017年09月27日 08:37:38 作者：恭一
下面小编就为大家带来一篇基于复选框demo(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本篇文章是关于复选框的，有2种形式：1、全选、反选由2个按钮实现；2、全选、反选由一个按钮实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复选框demo</title>
<script src="../js/jquery-1.10.2.js" type="text/javascript"></script>
<style>
body{ text-align:center}
.con{ margin:100px auto; width:800px; height:400px; border:1px solid #F00; padding-top: 50px;}
</style>
</head>
<body>
<div class="con">
<span><input type='checkbox' name='select' onclick='allSelect()'>全选</span>
<span><input type='checkbox' name='cancel' onclick='unAllSelect()'>反选</span>
<span><input type='checkbox' name='fruit' />苹果</span>
<span><input type='checkbox' name='fruit' />香蕉</span>
<span><input type='checkbox' name='fruit' />梨子</span>
<span><input type='checkbox' name='fruit' />桃子</span>
<span><input type='checkbox' name='fruit' />西瓜</span>
<br><br><br>
<span><input type='checkbox' id="allBook" name='allBook' />全选</span>
<span><input type='checkbox' name='book' />老子</span>
<span><input type='checkbox' name='book' />尚书</span>
<span><input type='checkbox' name='book' />周易</span>
<span><input type='checkbox' name='book' />诗经</span>
<span><input type='checkbox' name='book' />孟子</span>
<span><input type='checkbox' name='book' />中庸</span>
<script type="text/javascript">
//全选
function allSelect(){
$("input[name='fruit']").prop("checked", "checked");
$("input[name='cancel']").removeAttr("checked");
}
//反选
function unAllSelect(){
$("input[name='fruit']").removeAttr("checked");
$("input[name='select']").removeAttr("checked");
}
//单选
$("#allBook").click(function(){
if(this.checked){
// $("input[name='book']").attr("checked", true);
$("input[name='book']").prop("checked", "checked");
}else{
// $("input[name='book']").attr("checked", false);
$("input[name='book']").removeAttr("checked");
}
});
</script>
</div>
</body>
</html>
在实践中碰到一个问题——check全选失效。解决办法，使用prop方法代替attr。
$("input[name='book']").attr("checked", "checked");
$("input[name='book']").prop("checked", "checked");
这或许是和jQuery版本有关。
以上这篇基于复选框demo(分享)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
微信小程序开发自定义tabBar实战案例(定制消息99+小红心)
一定的需求情况下无法使用小程序原生的tabbar的时候,需要自行实现一个和tabbar功能一模一样的自制组件,下面这篇文章主要给大家介绍了关于微信小程序开发自定义tabBar(定制消息99+小红心)的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了三分钟学会用ES7中的Async/Await进行异步编程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
PDF.js是由Mozilla支持的基于HTML5的PDF查看器,可以在web上解析和呈现PDF文件,它支持内容检索、页面跳转、文件打印等功能,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
这篇文章主要给大家介绍了关于利用原生js实现html5小游戏之打砖块的相关资料，这是最近工作遇到的一个小需求，文中通过示例代码介绍的非常详细，并分享了完整的源码供大家参考学习，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
这篇文章主要介绍了JavaScript实现shuffle数组洗牌操作,结合实例形式分析了javascript数组的定义、构造、排序等相关操作技巧,需要的朋友可以参考下2019-01-01
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
这篇文章主要介绍了JavaScript数据结构与算法之二叉树插入节点、生成二叉树,结合实例形式较为详细的分析了javascript二叉树相关概念、定义、节点插入、遍历输出等相关操作技巧,需要的朋友可以参考下2019-02-02
这篇文章主要介绍了js实现七夕表白弹幕效果，jQuery实现弹幕技术，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了js实现图片预加载的方法，内容很详细，带领大家全面认识js图片预加载模块，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了CSS3+JavaScript实现翻页幻灯片效果,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-06-06
本篇文章主要是对使用js实现关闭js弹出层的窗口的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
最新评论