CheckBox Full Selection/All-select/click/inline JS and jquery implementation code

CheckBox Full Selection/All-select/click/inline JS and jquery implementation code

1. Optional/all optional box in one implementation, that is, the status of the list of the selection box with the full choice/all the marquee box before the status of the same;
2. Automatically change the status of the Select/all unselected boxes, that is, when the list selection box is selected, select All/All unselected boxes, and vice versa;
3. Click in the list line can also select the checkbox in the row, and with the 1,2 function linkage.

jquery Code

var _jq_chk = $ (' #jq >dl>dt>label>:checkbox ');
var _jqitems = $ (': Checkbox[name=jqitems] ');
var _rows = $ (' #jq >dl>dd ');

Full selection and all-in-one implementation
_jq_chk.click (function () {
List marquee and full selection box unified state
_jqitems.add (_JQ_CHK). attr (' checked ', this.checked);
});

Click event for Marquee
_jqitems.click (function (e) {
Prevents bubbling, avoids the row click event, the direct selection box is invalid
E.stoppropagation ();
Determines whether the selected number is the same as the actual number to determine the full/full selection status
_jq_chk.attr (' checked ', _jqitems.size () = = _jqitems.filter (': Checked '). Size ());
});

Select a checkbox in the row when the line is selected
_rows.bind ({
Mouseenter:function () {
$ (this). addclass (' hover ');
},
Mouseleave:function () {
$ (this). Removeclass (' hover ');
},
Point selection
Click:function () {
In-line clicks, the selection of the box in the row state is the original state of the reverse
$ (this). Find (': CheckBox '). attr (' checked ',!$ (this). "Find (': CheckBox ')." Get (0). Checked)
Determines whether the selected number is the same as the actual number to determine the full/full selection status
_jq_chk.attr (' checked ', _jqitems.size () = = _jqitems.filter (': Checked '). Size ());
}
});

JS code.
var js_chk = document.forms[' js '].chk_can;
var jsitems = document.forms[' js '].jsitems;
var jsrows = document.getElementById (' js '). getElementsByTagName (' DD ');

//To determine the number of selected and actual selection of boxes to implement the status of the full/unselected box
var Chk_canle = function () {
    var checkedlen = 0;
 // Count the number of selected states in the list
    for (var m = 0; m < jsitems.length; m++) {
     &nbs p;  if (jsitems[m].checked) {
            Checkedlen + 1;
       }
   }
 //Determines whether the number of selections is the same as the actual number to determine the full/total unselected
    for (var m = 0; m < js_chk.length; m++) {
 &nb sp;      js_chk[m].checked = (Jsitems.length = = Checkedlen);
   }
}

//Select all with all-in-one implementation
for (var i = 0; i < js_chk.length i++) {
    Js_chk[i].onclick = function () {
  //list box and select box Unified status
        for (var m = 0; m < jsitems.length; m++) {
            jsitems[m].checked = this.checked;
       }
  //Full selection box Unified status
        for (var m = 0; m < js_chk.length; m++) {
            js_chk[m].checked = this.checked;
       }
   }
}

Select box Click in List
for (var i = 0; i < jsitems.length; i++) {
Jsitems[i].onclick = function (e) {
Prevents bubbling, avoids the row click event, the direct selection box is invalid
E && e.stoppropagation? E.stoppropagation (): window.event.cancelbubble=true;
Chk_canle ();
}
}

In-line clicks
for (var i = 0; i < jsrows.length; i++) {
Jsrows[i].onclick = function () {
In-line clicks, the selection of the box in the row state is the original state of the reverse
This.getelementsbytagname (' input ') [0].checked =!this.getelementsbytagname (' input ') [0].checked;
Chk_canle ();
}
}

Full instance Code

<style>
/*demo CSS Tutorial * *
#demo {font-size:14px}
#js {float:left;width:48%}
#jq {float:right;width:48%}
#demo input{margin:0 8PX}
#demo h5{margin:10px 0 8px;padding:3px 10px;background: #d2d9df; letter-spacing:1px}
#demo Dl{line-height:2}
#demo DL Dt{background: #e8e8e8; Font-weight:bolder}
#demo DL DT Label{cursor:pointer}
#demo DL dd{margin:7px 0;border-bottom:1px dashed #ccc; Cursor:pointer}
#demo DL DD span{float:right;margin-right:8px}
#demo DL Dd.hover{background: #f1f1f1 border-bottom:1px Solid #f1f1f1}
</style>

<div id= "Demo" >
<form id= "JS" name= "JS" action= "#" >
<dl>
<dt><label for= "Js_chk_0" ><input type= "checkbox" id= "Js_chk_0" "Name=" Chk_can "value=" "/> Select All/Select All </label></dt>
<dd><span>2010-12-12</span><input type= "checkbox" Name= "Jsitems" value= ""/> Native JS implementation of the full choice/all do not choose, Point rows can also be selected or canceled </dd>
<dd><span>2010-12-12</span><input type= "checkbox" Name= "Jsitems" value= ""/> Native JS implementation of the full choice/all do not choose, Point rows can also be selected or canceled </dd>
<dd><span>2010-12-12</span><input type= "checkbox" Name= "Jsitems" value= ""/> Native JS implementation of the full choice/all do not choose, Point rows can also be selected or canceled </dd>
<dd><span>2010-12-12</span><input type= "checkbox" Name= "Jsitems" value= ""/> Native JS implementation of the full choice/all do not choose, Point rows can also be selected or canceled </dd>
<dd><span>2010-12-12</span><input type= "checkbox" Name= "Jsitems" value= ""/> Native JS implementation of the full choice/all do not choose, Point rows can also be selected or canceled </dd>
<dt><label for= "Js_chk_1" ><input type= "checkbox" id= "Js_chk_1" "Name=" Chk_can "value=" "/> Select All/Select All </label></dt>
</dl>
</form>
<!--//raw JS sample-->
<form id= "JQ" name= "JQ" action= "#" >
<dl>
<dt><label for= "Jq_chk_0" ><input type= "checkbox" id= "Jq_chk_0" "Name=" Chk_can "value=" "/> Select All/Select All </label></dt>
<dd><span>2010-12-12</span><input type= "checkbox" Name= "Jqitems" value= "/>" Full selection based on jquery/ All unselected, click to select or Cancel </dd>
<dd><span>2010-12-12</span><input type= "checkbox" Name= "Jqitems" value= "/>" Full selection based on jquery/ All unselected, click to select or Cancel </dd>
<dd><span>2010-12-12</span><input type= "checkbox" Name= "Jqitems" value= "/>" Full selection based on jquery/ All unselected, click to select or Cancel </dd>
<dd><span>2010-12-12</span><input type= "checkbox" Name= "Jqitems" value= "/>" Full selection based on jquery/ All unselected, click to select or Cancel </dd>
<dd><span>2010-12-12</span><input type= "checkbox" Name= "Jqitems" value= "/>" Full selection based on jquery/ All unselected, click to select or Cancel </dd>
<dt><label for= "Jq_chk_1" ><input type= "checkbox" id= "Jq_chk_1" "Name=" Chk_can "value=" "/> Select All/Select All </label></dt>
</dl>
</form>
<!--//jquery Sample-->

</div>

<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></script>
<script>

Original JS implementation of all Select all optional class
Window.onload = function Icheckall () {
var js_chk = document.forms[' js '].chk_can;
var jsitems = document.forms[' js '].jsitems;
var jsrows = document.getElementById (' js '). getElementsByTagName (' DD ');

To determine the number of selected and actual selection of the box to achieve the status of the full/optional box
var Chk_canle = function () {
var checkedlen = 0;
Count the number of selected states in a list
for (var m = 0; m < jsitems.length; m++) {
if (jsitems[m].checked) {
Checkedlen + 1;
}
}
Determines whether the selected number is the same as the actual number to determine the full/full selection status
for (var m = 0; m < js_chk.length; m++) {
js_chk[m].checked = (Jsitems.length = = Checkedlen);
}
}

Full selection and all-in-one implementation
for (var i = 0; i < js_chk.length; i++) {
Js_chk[i].onclick = function () {
List marquee and full selection box unified state
for (var m = 0; m < jsitems.length; m++) {
jsitems[m].checked = this.checked;
}
Full selection Box Unified state
for (var m = 0; m < js_chk.length; m++) {
js_chk[m].checked = this.checked;
}
}
}

Select box Click in List
for (var i = 0; i < jsitems.length; i++) {
Jsitems[i].onclick = function (e) {
Prevents bubbling, avoids the row click event, the direct selection box is invalid
E && e.stoppropagation? E.stoppropagation (): window.event.cancelbubble=true;
Chk_canle ();
}
}

In-line clicks
for (var i = 0; i < jsrows.length; i++) {
Jsrows[i].onclick = function () {
In-line clicks, the selection of the box in the row state is the original state of the reverse
This.getelementsbytagname (' input ') [0].checked =!this.getelementsbytagname (' input ') [0].checked;
Chk_canle ();
}
Please refer to http://mrthink.net/Web page special effects-tagnames-highlight/
Jsrows[i].onmouseo Tutorial ver = function () {
This.classname = ' hover ';
}
Jsrows[i].onmouseout = function () {
This.classname = ';
}
}
}

JQ implementation of all election
$ (function () {
var _jq_chk = $ (' #jq >dl>dt>label>:checkbox ');
var _jqitems = $ (': Checkbox[name=jqitems] ');
var _rows = $ (' #jq >dl>dd ');

Full selection and all-in-one implementation
_jq_chk.click (function () {
List marquee and full selection box unified state
_jqitems.add (_JQ_CHK). attr (' checked ', this.checked);
});

Click event for Marquee
_jqitems.click (function (e) {
Prevents bubbling, avoids the row click event, the direct selection box is invalid
E.stoppropagation ();
Determines whether the selected number is the same as the actual number to determine the full/full selection status
_jq_chk.attr (' checked ', _jqitems.size () = = _jqitems.filter (': Checked '). Size ());
});

Select a checkbox in the row when the line is selected
_rows.bind ({
Mouseenter:function () {
$ (this). addclass (' hover ');
},
Mouseleave:function () {
$ (this). Removeclass (' hover ');
},
Point selection
Click:function () {
In-line clicks, the selection of the box in the row state is the original state of the reverse
$ (this). Find (': CheckBox '). attr (' checked ',!$ (this). "Find (': CheckBox ')." Get (0). Checked)
Determines whether the selected number is the same as the actual number to determine the full/full selection status
_jq_chk.attr (' checked ', _jqitems.size () = = _jqitems.filter (': Checked '). Size ());
}
});
});
</script>