大家中秋节快乐!!!!不知道插件是不是这么简单的东西。。。。。。。。我看别人的插件都是两个字&ldquo;复杂&rdquo;;checkbox插件: <!DOCTYPE html><html lang="en">&l ...
大家中秋节快乐!!!!
不知道插件是不是这么简单的东西。。。。。。。。
我看别人的插件都是两个字“复杂”;
checkbox插件:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>checkbox插件</title> <script type="text/javascript" src='/images/loading.gif' data-original=""></script> <script type="text/javascript"> window.onload=function(){ checkedBox("#cb01"); checkedBox("#cb02",{check_all:false}); checkedBox("#cb03",{click_pos:false}); checkedBox("#cb04",{check_all:false,click_pos:false}); /*单选按钮*/ radioBox("#rb01"); radioBox("#rb02"); }/******************************************************//*复选框*//*addClass()、toggleClass()、equalClass()、removeClass()封装的,关于class添加、切换、是否存在这个class、移出class*/ function checkedBox(id,param){ /*默认参数,是否有全选复选框,是否点击文字可选中 *默认都是true */ var setting={ check_all:true, click_pos:true }; /*传的json格式参数,覆盖默认参数*/ extend(param,setting); /*获取元素*/ var oCheckbox=document.querySelector(id); var oP=oCheckbox.getElementsByTagName("p"); /*有全选复选框*/ if(setting.check_all){ oP[0].style.display="block"; /*全选复选框点击文字选中*/ if(setting.click_pos){ addClass(oP[0],"hand"); oP[0].onclick=function(){ var spanAll=this.getElementsByTagName("span")[0]; toggleClass(spanAll,"checked"); if(equalClass(spanAll,"checked")){ for(var i=1;i<oP.length;i++){ var oSpan=oP[i].getElementsByTagName("span")[0]; addClass(oSpan,"checked"); } }else{ for(var i=1;i<oP.length;i++){ var oSpan=oP[i].getElementsByTagName("span")[0]; removeClass(oSpan,"checked"); } } } /*全选复选框不能点击文字选中*/ }else{ var spanAll=oP[0].getElementsByTagName("span")[0]; spanAll.onclick=function(){ toggleClass(this,"checked"); if(equalClass(this,"checked")){ for(var i=1;i<oP.length;i++){ var oSpan=oP[i].getElementsByTagName("span")[0]; addClass(oSpan,"checked"); } }else{ for(var i=1;i<oP.length;i++){ var oSpan=oP[i].getElementsByTagName("span")[0]; removeClass(oSpan,"checked"); } } } } } /*可以点击文字选中*/ if(setting.click_pos){ for(var i=1;i<oP.length;i++){ addClass(oP[i],"hand"); oP[i].onclick=function(){ toggleClass(this.getElementsByTagName("span")[0],"checked"); for(var i=1;i<oP.length;i++){ if(!equalClass(oP[i].getElementsByTagName("span")[0],"checked")){ removeClass(oP[0].getElementsByTagName("span")[0],"checked"); return; }else{ addClass(oP[0].getElementsByTagName("span")[0],"checked"); } } } } /*不可以点击文字选中*/ }else{ for(var i=1;i<oP.length;i++){ var oSpan=oP[i].getElementsByTagName("span")[0]; oSpan.onclick=function(){ toggleClass(this,"checked"); for(var i=1;i<oP.length;i++){ if(!equalClass(oP[i].getElementsByTagName("span")[0],"checked")){ removeClass(oP[0].getElementsByTagName("span")[0],"checked"); return; }else{ addClass(oP[0].getElementsByTagName("span")[0],"checked"); } } } } } }/**********************************************************//*重复使用*/ function extend(obj1,obj2){ for(var attr in obj1){ obj2[attr]=obj1[attr]; } } /*判断对象元素是否有这个class,**第一个参数是传元素对象,这个对象不能是数组**第二个参数是要检查的class*存在返回true,不存在返回false**/function equalClass(obj,classname){ var arr=obj.className.split(" "); for(var i=0;i<arr.length;i++){ if(arr[i]==classname){ return true; } } return false;}/*添加class,**第一个参数是传元素对象,这个对象不能是数组**第二个参数是要添加的class*/function addClass(obj,classname){ if(equalClass(obj,classname)){ return; }else{ if(obj.className.trim().length==0){ obj.className=classname; }else{ obj.className+=" "+classname; } }}/*移除class**第一个参数是传元素对象,这个对象不能是数组**第二个参数是要添加的class*如果不存在class会有返回值-1*/function removeClass(obj,classname){ if(equalClass(obj,classname)){ var arr=obj.className.split(" "); for(var i=0;i<arr.length;i++){ if(arr[i]==classname){ arr.splice(i,1); } } obj.className=arr.join(" "); }else{ return -1; }}/*切换class,**第一个参数是传元素对象,这个对象不能是数组**第二个参数是要切换class*/function toggleClass(obj,classname){ if(equalClass(obj,classname)){ removeClass(obj,classname); }else{ addClass(obj,classname); }}/*****************************************************//*单选按钮*//*单选按钮过于简单不注释*/function radioBox(id){ var oRadioBox=document.querySelector(id); var oRadio=oRadioBox.getElementsByTagName("p"); if(equalClass(oRadio[0],"hand")){ for(var i=0;i<oRadio.length;i++){ oRadio[i].onclick=function(){ for(var i=0;i<oRadio.length;i++){ var os=oRadio[i].getElementsByTagName("span")[0]; removeClass(os,"active"); } addClass(this.getElementsByTagName("span")[0],"active"); } } }else{ for(var i=0;i<oRadio.length;i++){ oRadio[i].getElementsByTagName("span")[0].onclick=function(){ for(var i=0;i<oRadio.length;i++){ var os=oRadio[i].getElementsByTagName("span")[0]; removeClass(os,"active"); } addClass(this,"active"); } } }} </script> <style> body{ background: #00374B; } .h3{ color: #fff; font-size: 15px; } .checkbox p{ line-height: 14px; cursor:default; } .checkbox p.hand{ cursor: pointer; } .checkbox{ font-family: "微软雅黑"; color: #fff; background: #00374B; width: 300px; float: left; } .checkbox input[type="checkbox"]{ opacity: 0; margin: 0; cursor: pointer; } .checkbox .checkspan{ display: inline-block; width: 14px; height: 14px; margin-right: 5px; border: 1px solid #35a48e; vertical-align: top; cursor: pointer; } .checkbox span.checked{ background: url(icon_sprites.png); border: 1px solid #fff; } #check_all{ display: none; } /* 单选按钮 */ h2{ color: #fff; } h3{ color: #fff; } .radioBox{ width: 100px; } .radioBox input[type="radio"]{ opacity: 0; margin: 0; cursor: pointer; } .radioBox p{ color: #fff; line-height: 15px; } .radioBox p.hand{ cursor: pointer; } .radioBox span{ background: url(icon_sprites.png) -14px 0; display: inline-block; vertical-align: top; width: 15px; height: 15px; margin-right: 5px; cursor: pointer; } .radioBox span.active{ background: url(icon_sprites.png) -29px 0; } </style></head><body> <h2>复选框</h2> <p class="h3">1、点击文字可选中和全选,2、点击文字,没有全选,3、要点击复选框才能选中,全选,4、要点击复选框,没有全选</p> <!-- 1、点击文字可选中和全选 --> <div class="checkbox" id="cb01"> <p id="check_all"><span class="checkspan"><input type="checkbox" name="cb"></span>全选</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项一</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项二</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项四</p> </div> <!-- 2、点击文字,没有全选 --> <div class="checkbox" id="cb02"> <p id="check_all"><span class="checkspan"><input type="checkbox" name="cb"></span>全选</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项一</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项二</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项四</p> </div> <!-- 3、要点击复选框才能选中,全选 --> <div class="checkbox" id="cb03"> <p id="check_all"><span class="checkspan"><input type="checkbox" name="cb"></span>全选</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项一</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项二</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项四</p> </div> <!-- 4、要点击复选框,没有全选 --> <div class="checkbox" id="cb04"> <p id="check_all"><span class="checkspan"><input type="checkbox" name="cb"></span>全选</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项一</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项二</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p> <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项四</p> </div> <br clear="both"> <hr size="5"> <!-- 单选按钮 --> <h2>单选按钮</h2> <!-- 1 --> <h3>点击文字可选中</h3> <div class="radioBox" id="rb01"> <p class="hand"><span class="radio_span active"><input type="radio" name="sex"></span>是</p> <p class="hand"><span class="radio_span"><input type="radio" name="sex"></span>否</p> </div> <h3>只能选中单选框</h3> <!-- 2 --> <div class="radioBox" id="rb02"> <p><span class="radio_span active"><input type="radio" name="sex"></span>是</p> <p><span class="radio_span"><input type="radio" name="sex"></span>否</p> </div></body></html>
原标题:中秋来一发
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。