复选框全选、反选及根据值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;
}
}
}