Native JS version and the jquery version to implement the checkbox selection/All-select/Point/Line Selection (Mr.think) _javascript tips

Daily projects, for the list of articles or data, will probably use the checkbox of the full selection or the full selection of functions, the previous project has also written checkbox Choice JS, but have not collated. Just a few days ago a brother encountered this problem, simply, I spent a little time, with the original JS and jquery wrote a version, taking into account the flexibility of the use of the problem, not packaged, the need for the use of children's shoes to change the relevant parameters.

Feature Introduction point this view demo demo

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.
Another, this article is written in full selection, the mouse into the background color to draw a simple realization, more complete please refer to:

Http://www.jb51.net/article/24125.htm

Raw JS version of the core code

HTML code

<form id= "JS" name= "JS" action= "#" > 
Native JS Implementation of the optional all-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 the actual number of boxes to achieve the full selection/unselected box state var Chk_canle = function () {var checkedlen = 0;
   The number of marquee selections for the selected state in the list for (var m = 0; m < jsitems.length m++) {if (jsitems[m].checked) {checkedlen = 1; }//Determine if the number of selections is the same as the actual number to determine the full/full selection for (var m = 0; m < js_chk.length m++) {js_chk[m].checked = (jsitems.lengt
  h = = Checkedlen);
   }//Select all implementation for (var i = 0; i < js_chk.length i++) {Js_chk[i].onclick = function () {//List selection box and full selection box unified state
   for (var m = 0; m < jsitems.length; m++) {jsitems[m].checked = this.checked;
   //All Select Box Unified state for (var m = 0; m < js_chk.length m++) {js_chk[m].checked = this.checked; Select the box on}//list for (var i = 0; i < jsitems.length i++) {Jsitems[i].onclick = function (e) {//block bubbling, avoid row click events InDirect selection box Invalid e && e.stoppropagation?
   E.stoppropagation (): window.event.cancelbubble=true;
  Chk_canle ();
   (var i = 0; i < jsrows.length; i++) {Jsrows[i].onclick = function () {/////) {////Within line click, the checkbox status in the row is reversed in the original state.
   This.getelementsbytagname (' input ') [0].checked =!this.getelementsbytagname (' input ') [0].checked;
  Chk_canle (); Please refer to Http://mrthink.net/javascript-tagnames-highlight/jsrows[i].onmouseover = function () {this.classname = '
  Hover ';
  } jsrows[i].onmouseout = function () {this.classname = '; }
 }
}

jquery Version Core code

HTML code

<form id= "JQ" name= "JQ" action= "#" > //JQ implement all optional $ (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 all-selection box Unified State _jqitems.add (_JQ_CHK). attr (' checked ', this.checked);
	
 });
		Marquee Click event _jqitems.click (function (e) {//block bubble, avoid row Click event, direct selection box invalid e.stoppropagation ();
 Determines whether the selected number is the same as the actual number to determine the full/unselected state _jq_chk.attr (' checked ', _jqitems.size () = = _jqitems.filter (': Checked '). Size ());
	
 });
  Select the checkbox _rows.bind in the row ({mouseenter:function () {$ (this). addclass (' hover ') in the selected rows;
  }, Mouseleave:function () {$ (this). Removeclass (' hover '); },///Click:function () {//Click in line, the checkbox status in the row is in the original state of the reverse $ (this). Find (': CheckBox '). attr (' checked ',!$ (")". Find (': check Box '). Get (0). Checked)//Determine whether the selected number is the same as the actual number to determine the full/unselected state _jq_chk.attr (' checked ', _jqitems.size () = = _jqitems.filter (': Ch
  Ecked '). Size ());
}
 }); 
});

This code than the common implementation of a lot of code, the main performance of the line can be clicked to achieve the selection function. More features more code. We can cut it by ourselves as necessary.

Believe that a lot of people who do the web will encounter some JS problem, that is to use JQ to achieve or use JS to achieve, often puzzles us, but in fact JS is universal, and JQ is built in their own loaded JQ library, where the real implementation is no difference.