美化的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);