最近在做一个政企满意度调查问卷类的项目 问卷中的单选、多选框要求用美化的图标图片取代默认单选复选框 所以我又用原生JS封装了一个小功能。。。是的 又是原生JS 。
这个功能具备点击渲染图标 改变input的checked属性值 并能够把已选选项的ID存取到隐藏变量内 先看一下HTML结构和CSS样式：
<!--复选框-->
<div onclick=javascript:change_icon(this,"x",2); >
<span >
<a class="checkbox_bg" href="#"></a>
<input type="checkbox" id="x_a1" style="display:none;" />
</span>
<label for="x_a1">AAAAAAAA</label>
</div>
<!--隐藏变量-->
<input type="hidden" id="x_ansid" />
<!--单选框-->
<div onclick=javascript:change_icon(this,"x",1);>
<span>
<a class="radio_bg" href="#"></a>
<input type="radio" id="r_a1" style="display:none;" />
</span>
<label for="r_a1">000000000</label>
</div>
<style>
.checkbox_bg{
display:inline-block;
width:20px;height:20px;
background:url("img/checkbox_false.png") no-repeat left center;
background-size:20px 20px;
}
.radio_bg{
display:inline-block;
width:20px;height:20px;
background:url("img/checkradio_false.png") no-repeat left center;
background-size:20px 20px;
}
</style>
当然结构不一定要这样写 也可以把label包住input 。。。接下来就是给大父级DIV添加点击事件 在这里我把单选和复选用一个标识参数区分开并融合到一个函数里 并且因为我们后台要求的数据格式是“,ID1,ID2,ID3,ID4,...,"所以在这里存储的时候做了一下字符串处理 请看函数
<script>
function change_icon(_this,mainid,bs){
var now_input=_this.getElementsByTagName('input')[0];
var now_a=_this.getElementsByTagName('a')[0];
var nowid=now_input.id;
var checked_value=var addid=document.getElementById(mainid+'_ansid');//隐藏变量
var addid=checked_value.value;
if(bs==2){ //多选
if(now_input.checked==false){
now_a.style.background='url(img/checkbox_true.png) no-repeat left center';
now_a.style.backgroundSize='20px 20px';
now_input.checked=true;
if (addid == null || addid == ''){
checked_value.value=addid+','+nowid.split("_")[1]+',';
}else{
checked_value.value=addid+nowid.split("_")[1]+',';
}
}else {
now_a.style.background='url(img/checkbox_false.png) no-repeat left center';
now_a.style.backgroundSize='20px 20px';
now_input.checked=false;
checked_value.value=addid.replace(nowid.split("_")[1]+',',"");
}
if(checked_value.value==','){
checked_value.value='';
}
}else{ // 单选
if(now_input.checked==false){
var all_a=_this.parentNode.getElementsByTagName('a');
//先清后加
for(var i=0;i<all_a.length;i++){
all_a[i].style.background='url(img/checkradio_false.png) no-repeat left center';
all_a[i].style.backgroundSize='20px 20px';
var a_input=all_a[i].nextElementSibling ||all_a[i].nextSibling;
a_input.checked=false;
}
now_a.style.background='url(img/checkradio_true.png) no-repeat left center';
now_a.style.backgroundSize='20px 20px';
now_input.checked=true;
checked_value.value=nowid.split("_")[1];
}
}
}
</script>
在这里要解释一下，虽然组织在一个方法里面里，但是单选和复选的逻辑不太一样。单选的思路是当点击某一个的时候，给每一组DIV先换成false图片，在另外单独给当前这个DIV换上true的图片。而多选的逻辑是点击时如果当前这个DIV的input是false，则变为true,并换上true的图片，否则则变为false并换上false的图片。另外还有一些开存第一个和删除最后一个后的简单处理，不在赘述。
功能介绍完毕，接下来就开始填坑了，我发现多选的时候,点击某一个后总是会重复执行click事件，导致存储的数据每一个都会存两遍。但是如果把事件名换成了onmouseup,那么事件只会执行一次，数据也不会重复存储了。但是。。。测试的过程中发现onmouseup事件没有onclick事件灵敏，onmouseup事件点击取消选择时需要多次点击才会触发，用户体验很差，这样肯定过不了。查了很多帖子，有的说onclick事件包括onmousedown和onmouseup组合事件，所以会出发两次，但是拿一个很简单的例子click试一下也不会执行两遍，我都开始怀疑三观了。。。结果在我准备静下心来重新写一遍这个功能的时候，我不小心忘记了给label用for绑定input的ID，所以，就很乌龙了。。。然后才查到了问题的核心，“原因应该就是label与input绑定了的缘故，点击label等效于点击input。点击label，冒泡触发一次父元素的click，然后label默认又会触发绑定input的click事件，又一次触发父元素的事件。”
当然，解决label的问题的正经方法肯定是像我一样忘记写for，查到了几种解决方法的思路：
一、最简单粗暴的方法就是阻止input的点击事件：
<input type="checkbox" id="x_a1" style="display:none;" onclick=javascript:return false; />
二、转换布局思路，让input覆盖在label标签上,使点中对象只能是input标签
三、在label>input结构下，为了避免重复点击事件，将点击事件直接加到input中即可。对应的CSS：
label{cursor: pointer;background-color: #f00;}
label input{margin-right: -13px;width:13px;height: 13px;opacity: 0;filter: alpha(opacity=0);}
input标签的css规则，是为了保证不隐藏input的情况下，又能使input不占位，并且在页面上透明显示，从而保证ie7/8也能像chrome一样能正常响应input的点击事件！ie7下默认的input宽高是20px,标准浏览器是13px,因要兼容处理，margin-right才能统一写-13px。
反反复复终于解决了这个小Bug,虽然是一个小功能，但是我发现在用原生JS开发可以接触最底层的逻辑和算法，每一个细小的功能，都是自己组织起来的，遇到问题时，应该是第一时间找出解决办法，但是对于一名有着高远追求的程序员，最欣慰的不是找到一段能够解决bug的方法，而是自己能够有时间静下来去钻研摸索其中的问题核心所在，依然痛并快乐着。
网友评论