美化的checkbox样式，用jQuery关联label和input

本来label和input可以用for属性来关联的，只需要通过css样式就能达到美化的效果。例如：

这种效果就是用纯css样式完成的，html代码如下：

<div class="RadioStyle">
  <input type="radio" name="Storage" id="model1" />
  <label for="model1">iPhone 6s</label>
</div>

css代码如下：

.RadioStyle input {
	display: none
	}
	
.RadioStyle label {
	background-color: #EEEEEE;
	border: #EEEEEE solid 1px;
	padding: 6px 20px;
	border-radius: 4px;
	line-height: 36px;
	margin: 2px;
}

.RadioStyle input:checked + label
	{background: transparent url('../assets/img/checkOrange.png') no-repeat 10px center;
	background-size: 10px 8px;
	color: #ED7161;
	border: #ED7161 solid 1px;
	padding: 6px 10px 6px 30px;
}

通过input:checked + label就可以完成样式的变化。

但是问题总不会那么容易就让你解决的…由于我们公司用的是dojo框架，导致这些代码在项目中根本不好使！！！label选择没有反应，根本触发不了input的选中状态，所以这个时候就需要调动自己的大脑了，想想还是得用js完成，正好项目引入了jQuery，就用jQuery来写吧^^

jQuery代码如下：

var inputs = $("父元素 input");//选中所有的input
inputs.click(function() {//循环操作
  if($(this).next().hasClass("active")){//label被选中时点击
    //取消选中input，并移出选中样式
    $(this).prop('checked', false);
    $(this).next().removeClass('active');
  }else {
    //选中input，并添加选中样式
    $(this).prop('checked', true);
    $(this).next().addClass('active');
  }
});

由于我们项目还要求可以重置，可以完成后传参到后台获取数据

所以，还有两个函数需要完成：

$('.courseStudyNote-resetBtn').click(function() {
  //console.log('重置');
  $("#courseSelectStuManageMenu input").prop('checked', false);//将所有input都取消选中
  $("#courseSelectStuManageMenu label").removeClass('active');//移出选中样式
});

$('.courseStudyNote-completeBtn').click(function() {
  //console.log('完成');
  //隐藏遮罩层
  $("#mask").hide();
  $("#" + id).slideUp();
  $(obj).css('background-image', 'url(eol85/image/arrow-down.png)');

var classCheck = $("#classBox input[type='checkbox']:checked"),//班级下的checkbox
    groupCheck = $("#groupBox input[type='checkbox']:checked"),//小组下的checkbox
    classCheckVal = [],
    groupCheckVal = [] ;
for(var i = 0; i < classCheck.length ; i++ ){
  classCheckVal.push($(classCheck[i]).val());
}
console.log('class:'+classCheckVal);
for(var j = 0; j < groupCheck.length ; j++ ){
  groupCheckVal.push($(groupCheck[j]).val());
}
console.log('group:'+groupCheckVal);

var postParam={//参数
  "htwId": id,
  "commit": 1,
  "classnums": classCheckVal,
  "groupIds": groupCheckVal
};
getData('/tea/courseHomeworkAnswerList.do', postParam, '/homework/tea/homeworkCommitList',null,null);

 

转载于:https://my.oschina.net/u/3367481/blog/2250810