Native JavaScript custom Input[type=checkbox] Effects

Last Update:2018-03-30 Source: Internet

Author: User

Tags prev tagname

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The above-mentioned Input[type=radio] approach published, when I do input[input=checkbox], I think it will be similar to the radio approach, the result is the same, but there are very different.

Different points have

1) The checkbox comes with bubbling and capturing events, and the result is that clicking on the label of the package checkbox will cause two occurrences, that is, the checkbox is selected and then unchecked, so you need to stop bubbling when you bind to the label event

2) Check Chekbox need to use the Chekbox checked property, set the selected and selected state of the property, this is consistent with radio

The code is as follows

1<! DOCTYPE html>2"en">3 45<meta charset="UTF-8">6<title> Custom Checkbox</title>7<style type="Text/css">8 #ceshi Label Input {9 Display:none;Ten     } One  A #ceshi label span { -display:inline-Block; - width:18px; the height:18px; -Border-radius: -%; - border:2px solid #ddd; -box-sizing:border-box; + position:relative; - top:3px; +margin-right:6px; A     } at  - #ceshi label Span.active { - border:3px solid red; -     } -</style> - in  -<body> to<form id="Ceshi"action="test.php"Method="Get"> +  -<label> the<span></span> *<input type="checkbox"Name="T1"Value="This is Test 1 .">This is Test 1 . $</label>Panax Notoginseng<label> -<span></span> the<input type="checkbox"Name="T2"Value="This is Test 2 .">This is Test 2 . +</label> A<label> the<span></span> +<input type="checkbox"Name="T3"Value="This is Test 3 .">This is Test 3 . -</label> $<input type="Submit"Name=""Value="Submit"> $</form> -<script type="Text/javascript"> -         //the siblings () function of jquery implemented by native JS theHTMLElement.prototype.siblings =function () { -Let arr = [];//Save Sibling nodesWuyiLet prev = This. previoussibling;//o The previous sibling node the             //Query the sibling node first -              while(prev) { Wu                 if(Prev.nodetype = =1&& Prev.tagname = = This. TagName) { -Arr.unshift (prev);//Array Header insert array, ensure node order About                 } $prev = prev.previoussibling;//assign the previous node to Prev -             } -             //query sibling nodes down -Let next = This. nextSibling;//o The latter sibling node A              while(next) { +                 if(Next.nodetype = =1&& Next.tagname = = This. TagName) { theArr.push (next);//array trailing inserts to ensure node order -                 } $Next = next.nextsibling;//next node assigned to next, for Loop the             } the             returnarr; the         } the         //determine if HtmlElement contains a class -HTMLElement.prototype.hasClass =function (CLS) { in             return  This. Classname.match (NewREGEXP ('(\\s|^)'+ CLS +'(\\s|$)')); the         } the         //HtmlElement object Add Class AboutHTMLElement.prototype.addClass =function (CLS) { the             if(! This. Hasclass (CLS)) This. className + =" "+CLS; the         } the         //HtmlElement Object Delete class +HTMLElement.prototype.removeClass =function (CLS) { -             if( This. Hasclass (CLS)) { the                 varReg =NewREGEXP ('(\\s|^)'+ CLS +'(\\s|$)');Bayi                  This. ClassName = This. Classname.replace (Reg,' '); the             } the         } -         //implementation Functions - function Nativeselfradio (DOM) { the             //reduce access to the DOM the             varSpan=dom.getelementsbytagname ("span")[0]; the             varInput=dom.getelementsbytagname ("input")[0]; the             //Either Delete or uncheck, no add or select -             if(Span.hasclass ("Active")) { theSpan.removeclass ("Active"); theInput.checked=false; the}Else{94Span.addclass ("Active"); theInput.checked=true; the             } the             98            About         } -         //Binding Events101         varLen=document.getelementbyid ("Ceshi"). getElementsByTagName ("label");102          for(vari =0; i < len.length; i++) {103             //avoid returning to this page, the Hidden checkbox is still selected104Len[i].getelementsbytagname ("input")[0].checked=false; thelen[i].onclick=function (e) {106Nativeselfradio ( This);107 E.preventdefault ();108             }109         } the 111</script> the</body>113  the
This article concludes.
Native JavaScript custom Input[type=checkbox] Effects

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More