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

}

posted @ 2018-03-12 16:01  诗为马  阅读(8320)  评论(0编辑  收藏  举报