復選框全選、反選及根據值JS控制復選框默認選中事件

HTML代碼

<div class="col-sm-7">
<input type="checkbox" id="allAndNotAll" />全選/反選<br><br>
<input type="checkbox" name="check" id="1" value="1"/>1月
<input type="checkbox" name="check" id="2" value="2"/>2月
<input type="checkbox" name="check" id="3" value="3"/>3月
<input type="checkbox" name="check" id="4" value="4"/>4月
<input type="checkbox" name="check" id="5" value="5"/>5月
<input type="checkbox" name="check" id="6" value="6"/>6月
<input type="checkbox" name="check" id="7" value="7"/>7月
<input type="checkbox" name="check" id="8" value="8"/>8月
<input type="checkbox" name="check" id="9" value="9"/>9月
<input type="checkbox" name="check" id="10" value="10"/>10月
<input type="checkbox" name="check" id="11" value="11"/>11月
<input type="checkbox" name="check" id="12" value="12"/>12月
</div>

 

JS代碼

實現全選與反選

$("#allAndNotAll").click(function() {
var isChecked = $(this).prop("checked");
$("input[name='check']").prop("checked", isChecked);
});

 

根據值默認勾選復選框

var checks=$scope.model.vaildRange;    //-----復選框的值
checks=checks.split(",");　　　　　　　//------字符串以逗號分割
var boxes = document.getElementsByName("check"); //----根據name獲取頁面上的復選框

//循環值，默認勾選處理
for(i=0;i<boxes.length;i++){
for(j=0;j<=checks.length;j++){
if(boxes[i].value == checks[j]){
boxes[i].checked = true;
}
}

}