JS 全选/反选Checkbox几个不错的实例

利用JS，全选FORM中的所有CHECKBOX。

Javascript代码：

 代码如下 复制代码

<SCRIPT language=javaScript>     
   
//全选或全部不选     
function checkall() {     
    var isChecked=(document.form1.checkAll.checked == true);     
    var elements_all=document.form1.elements;     
    for(i=0;i<elements_all.length;i++) {     
        var element=elements_all[i];     
        if(element.type=="checkbox")  {     
            element.checked=isChecked;     
        }     
    }     
}     
   
//是否有checkbox被选中     
function anyChecked() {     
    var elements_any=document.form1.elements;     
    for(i=0;i<elements_any.length;i++) {     
        var element=elements_any[i];     
        if(element.checked == true) {     
            return true;     
        }     
    }     
    return false;     
}     
   
</SCRIPT>   

HTML代码：

<FORM onsubmit="return anyChecked()" method=post name=form1 action="">     
全选:<INPUT id=checkAll onclick=checkall() type=checkbox>     
多项选择框列表:     
<INPUT value=1 type=checkbox name=cb>     
<INPUT value=2 type=checkbox name=cb>     
<INPUT value=3 type=checkbox name=cb>     
<INPUT value=submit type=submit name=Submit>     
</FORM>    

再看一个jquery实例

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

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

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

 

 代码如下 复制代码

<!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 runat="server">
<title>jQuery实现CheckBox全选、全不选</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>    <script type="text/javascript">
        $(function() {
           $("#checkAll").click(function() {
                $('input[name="subBox"]').attr("checked",this.checked);
            });
            var $subBox = $("input[name='subBox']");
            $subBox.click(function(){
    $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
            });
        });
    </script>

</head>
<body>
    <div>
        <input id="checkAll" type="checkbox" />全选
        <input name="subBox" type="checkbox" />项1
        <input name="subBox" type="checkbox" />项2
        <input name="subBox" type="checkbox" />项3
        <input name="subBox" type="checkbox" />项4
    </div>
</body>
</html>
时间： 2024-10-04 15:03:44

JS 全选/反选Checkbox几个不错的实例的相关文章

jQuery 全选/反选以及单击行改变背景色实例

我先把CSS样式放出来,其实这个可以直接忽略 复制代码 代码如下: body{margin:0;padding:0;font-size:12px;font-family:微软雅黑;} .datagrid{width:100%;} .datagird tr th{background-color:#191970; font-size:14px;} .datagrid tr th, .datagrid tr td{border:1px solid #ccc; border-collapse:coll

jquery、js操作checkbox全选反选

 全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选   代码如下: //全选  function checkAll() {  $('input[name="TheID"]').attr("checked", "checked");  }  //反选  function uncheckAll() {  $('input[name="TheID"]').each(fu

jquery、js操作checkbox全选反选_javascript技巧

操作checkbox,全选反选 复制代码 代码如下: //全选 function checkAll() { $('input[name="TheID"]').attr("checked", "checked"); } //反选 function uncheckAll() { $('input[name="TheID"]').each(function() { this.checked = !this.checked; }) }

Jquery CheckBox全选方法代码附js checkbox全选反选代码_jquery

jquery方法如下: 复制代码 代码如下: function CheckAll(val) { $("input[name='chkJob']").each(function() { this.checked = val; }); $("#chkAll").attr("checked", val);//设定全选按钮状态 } val 该参数传递的是全选按钮的选择状态 name='chkJob' 这个为列表中的checkbox名称 chkAll 就为

js checkbox 复选框全选反选

//方法一 <script language="网页特效">  function checkallbox(box)  {   var f = box.form;   var ischecked = box.checked;   for (var i=0; i<f.elements.length; i++)   {    if (f.elements[i].type.tolowercase() == "checkbox")    {     f.el

js多兼容全选/反选代码

js多兼容全选/反选代码 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js多兼容全选/反选代码</title> <script language="javascript教程">  function Choose(sel, arg) //传递2个参数,分别是表名,选

CHECKBOX全选,取消全选,反选 jquery代码

方法一  $("#myform").togglecheckboxes()//全选,取消全选,反选 $("#myform").togglecheckboxes(":not(#checkbox1)")//全选,取消全选且不选中第一个,反选 $("#myform").togglecheckboxes(".top5", true)//全选,取消全选且只选前五个,反选 $("#myform").c

javascritp checkbox全选反选代码

javascritp checkbox全选反选代码 //全选与反选 <script type="text/网页特效"> var checkflag = "false"; function check(field) {      if (checkflag == "false")      {            for (i = 0; i < field.length; i++)            {           

jquery checkbox全选反选实现代码

在jquery中我们要判断checkbox是否选中我们可以直接使用 if($("#id").attr("checked")==true) 来操作. 那么如果我们要实现多个checkbox全选反选就可以利用each进行遍历了 jquery代码  代码如下 复制代码 function selectall(){      var arrChk=$("input[name='deleteid']");//checkbox名称        $(arrCh