js 实现全选反选

最近在做一个js特效:全选,反选。

效果能实现,可是只执行了一次。多次点击,发现效果不能触发了。后来查了些文档,才了解是  attr  跟 prop 的区别!

代码直接贴出来:

($("#全选ID").attr("checked") 的返回值 就是  true/false )

 attr只能运行一次:  

function checked_all(){
                            $("input[name=‘XXX‘]:checkbox").each(function(){
                                $(this).attr("checked",$("#全选ID").attr("checked"));
                           });
                      }

           prop可以实现多次点击:

function checked_all(){
                            $("input[name=‘XXX‘]:checkbox").each(function(){ 
                                    $(this).prop("checked",$("#全选ID").prop("checked"));
                            });
                     }

      html 如下:

             <input type="checkbox" id="all_checkboxes" onclick = "checked_all();">全选

时间: 2024-08-24 12:04:58

js 实现全选反选的相关文章

js实现全选反选

在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="theadInp" /> </th> <th>快递</th> <th>

js实现全选,反选,全不选

思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设为true选中状态. js代码 <script> window.onload=function(){ var CheckAll=document.getElementB

js制作全选 反选 不选

<!DOCTYPE html><html >    <head>        <meta charset="utf-8">        <title></title>    </head>    <style>        </style>        <script>    window.onload=function (){        var aBtn

js购物车全选反选、商品价格统计

模仿淘宝购物车的全选全不选,根据选中的商品计算价格,指定店铺选择.以下是我自己在做H5页面的时候整理出来的,想我一个纯php的来写成这样也不容易.不完善的地方欢迎各位小伙伴指出~ html代码: <body>     <header class="mui-bar mui-bar-nav">         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"

js实现全选反选功能

开始慢慢地学习js&jQuery. function clicked(){ var arr=document.getElementsByName("product"); for(var i=0;i<arr.length;i++) { arr[i].checked=document.getElementById("all").checked; } } 出现问题如下: 1.getElementsByName开始被写成getElementByName,注意少

用js做出全选和反选效果

效果图如下: <script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" language="javascript"> $(function(){  $("#selecAll").clic

全选反选取消-js代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

elementUI+JS实现全选与反选

在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initia

JS 全选反选功能

全选按钮:<input type=\"checkbox\" id=\"cheSelectAll\" />选择</li>"); 选择项:<input name=\"chkItem\" type=\"checkbox\" value=\"" + this.ID + "\" /> //全选反选 $("#cheSelectAll"