脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现全选和多选

js实现功能比较全面的全选和多选

 更新时间：2017年03月02日 15:59:33   作者：luo8481824  
本文主要分享了js实现功能比较全面的全选和多选的示例代码，具有很好的参考价值。下面跟着小编一起来看下吧

效果图：

代码如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 </head>
 <body>
 <input type="checkbox" id="checkbox" value="1" onclick="check()" />水果 <br />
 <input type="checkbox" value="${article.id}" name="box" class="item" />奶茶<br />
 <input type="checkbox" value="${article.id}" name="box" class="item"/>香蕉<br />
 <input type="checkbox" value="${article.id}" name="box" class="item"/>橘子<br />
 <input type="checkbox" value="${article.id}" name="box" class="item"/>苹果<br />
 <input type="checkbox" value="${article.id}" name="box" class="item"/>梨子<br />
 <script type="text/javascript">
 function quanxuan(){
 var $checkbox = $(".item"); 
 var $checked = $checkbox.filter(":checked");
 if($checkbox.length == $checked.length){
  $("#checkbox").prop("checked",true);
 }else{
  $("#checkbox").prop("checked",false);
 }
 }
 $(function(){
 $("#checkbox").on("change",function(){
  var checked = $(this).prop("checked"); // true / false
  $(".item").prop("checked",checked);
  quanxuan();
 });
 $("body").on("change" , ".item",function(e){
  quanxuan();
 });
 }); 
 </script>
 </body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 深入浅析JavaScript中数据共享和数据传递

    深入浅析JavaScript中数据共享和数据传递

    这篇文章主要介绍了深入浅析JavaScript中数据共享和数据传递的相关资料,需要的朋友可以参考下
    2016-04-04
  • JS对日期操作封装代码实例

    JS对日期操作封装代码实例

    这篇文章主要介绍了JS对日期操作封装代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • javascript实现简单小钢琴有声弹奏效果

    javascript实现简单小钢琴有声弹奏效果

    用HTML5+javascript实现的小钢琴,按下钢琴键上的相应字母用或用鼠标点击钢琴键发声,javascript代码包含了对鼠标按下、移动和松开,以及键盘按下的事件监听
    2024-02-02
  • Promise 链式调用原理精简示例

    Promise 链式调用原理精简示例

    这篇文章主要为大家介绍了Promise 链式调用原理精简示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 代码整洁之道(重构)

    代码整洁之道(重构)

    这篇文章主要介绍了代码整洁之道(重构)，不管对于何种语言，重构都是软件开发过程中不可或缺的一部分，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • JavaScript中事件委托的示例详解

    JavaScript中事件委托的示例详解

    所谓事件委托，就是将原本应该在当前元素绑定的事件，放到它的祖先元素上，让祖先元素来委托处理。今天我们来认识一下JS中的事件委托
    2022-07-07
  • javascript实现的listview效果

    javascript实现的listview效果

    javascript实现的listview效果...
    2007-04-04
  • JS画布动态实现黑客帝国背景效果

    JS画布动态实现黑客帝国背景效果

    这篇文章主要为大家详细介绍了JS画布动态实现黑客帝国背景效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • js判断浏览器类型的方法

    js判断浏览器类型的方法

    这篇文章介绍了js判断浏览器类型的方法，有需要的朋友可以参考一下
    2013-08-08
  • 代码块高亮可复制显示js插件highlight.js+clipboard.js整合

    代码块高亮可复制显示js插件highlight.js+clipboard.js整合

    最近有个需求是将jsp页面上的某一段代码块格式化成类似CSDN的代码块的样式，而且很多平台都使用了这样的功能，下面就为大家简单分享一下
    2021-02-02

最新评论