全选/取消全选

最新推荐文章于 2023-02-17 17:40:55 发布

多一点点

最新推荐文章于 2023-02-17 17:40:55 发布

阅读量931

点赞数

js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

/**
 *
 *全选、全消
**/
function checkAll(){
	var checkboxList = $('input[type="checkbox"]',document.forms[0]); 
	var checkSels=document.getElementById("checkSels");
	checkboxList.each(function(i){
		    if(!$(this).attr('disabled'))
                	      this.checked=checkSels.checked;
             	    });
		}

用JavaScript使页面上的一组checkbox全选/取消全选，逻辑很简单，实现代码也没有太难的语法。但使用jQuery实现则更简单，代码也很简洁，精辟！

<html>
 <head>
 <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
 </head>
 <body>
 <input type="checkbox" name="chk_list" id="chk_list_1" value="1" />1<br />
 <input type="checkbox" name="chk_list" id="chk_list_2" value="2" />2<br />
 <input type="checkbox" name="chk_list" id="chk_list_3" value="3" />3<br />
 <input type="checkbox" name="chk_list" id="chk_list_4" value="4" />4<br />
 <input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
 <script type="text/javascript">
 $("#chk_all").click(function(){
      $("input[name='chk_list']").attr("checked",$(this).attr("checked"));
 });
 </script>
 </body>
 </html>

jQuery.attr 获取/设置对象的属性值,如：

$("input[name='chk_list']").attr("checked"); //读取所有name为'chk_list'对象的状态（是否选中）

$("input[name='chk_list']").attr("checked",true); //设置所有name为'chk_list'对象的checked为true

再如：

$("#img_1").attr("src","test.jpg"); //设置ID为img_1的<img>src的值为'test.jpg'
$("#img_1").attr("src"); //读取ID为img_1的<img>src值

下面的代码是获取上面实例中选中的checkbox的value值:

<script type="text/javascript">
     //获取到所有name为'chk_list'并选中的checkbox(集合)
     var arrChk=$("input[name='chk_list]:checked");
     //遍历得到每个checkbox的value值
     for (var i=0;i<arrChk.length;i++)
     {
          alert(arrChk[i].value);
     }
 </script>

哪位高手能把上面遍历的过程用$.each()写出来，不胜感激。

在此谢谢rainnoless的帮助，下面是用$.each()遍历的代码：

<script type="text/javascript">

    var arrChk=$("input[name='chk_list']:checked");

    $(arrChk).each(function(){

       window.alert(this.value);                        

    }); 

});

</script>

转自：http://www.cnblogs.com/bynet/archive/2009/11/13/1602491.html

用JQUERY实现全选和取消全选,没有js那么繁琐，而且支持更多浏览器。

<mce:script type="text/javascript"><!--
 
$(function() {  
    $("#checkall").click(function() {  
        $("input[@name='checkname[]']").each(function() {  
            $(this).attr("checked", true); 
        }); 
    }); 
    $("#delcheckall").click(function() {  
        $("input[@name='checkname[]']").each(function() {  
            $(this).attr("checked", false); 
        }); 
    }); 
}); 
// --></mce:script> 
  
<input type='checkbox' id='id1' name='checkname[]' value='1' />value1  
<input type='checkbox' id='id2' name='checkname[]' value='2' />value2 
<input type='checkbox' id='id3' name='checkname[]' value='3' />value3 
  
<input type="button" id="checkall" name="checkall" value="全选" /> 
<input type="button" id="delcheckall" name="delcheckall" value="取消全选" />

更加简单的一种:更加简单的一种:

$("#checkall").click( 
  function(){ 
    if(this.checked){ 
        $("input[name='checkname']").attr('checked', true)
    }else{ 
        $("input[name='checkname']").attr('checked', false)
    } 
  } 
);

多一点点

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
全选/取消全选

/** * *全选、全消**/function checkAll(){ var checkboxList = $('input[type="checkbox"]',document.forms[0]); var checkSels=document.getElementById("checkSels"); checkboxList.each(function(i){
复制链接

扫一扫