项目中有一个需求,需要通过jquery代码动态设置radio和checkbox的选中状态,而不是通过鼠标点击手动设置,并且需要动态触发radio和checkbox的change事件。
radio的一般是有一个组,此处,我使用的是mui,可到官网自行下载依赖的css和js文件。
<div class="mui-input-row mui-radio mui-left">
<label>住宅</label>
<input id="zzradio" name="radio1" value="住宅" type="radio" checked>
</div>
<div class="mui-input-row mui-radio mui-left">
<label>非住宅</label>
<input id="fzzradio" name="radio1" value="非住宅" type="radio">
</div>
radio的change事件绑定可以用click也可以用change,建议使用change,因为click在选中的状态下也会一直触发,浪费资源。
//住宅/非住宅选项
$("input[name=radio1]").change(function () {
var val = $(this).val();
if (val === "住宅") {
//相应操作
}
else {
//相应操作
}
});
通过jquery动态设置radio的选中状态,以下两种方式都会成功设置radio的选中状态,但是都不会触发change事件。
$("#zzradio").prop("checked",true);
$("#zzradio").attr("checked","checked");
需要通过这种方式:$("#zzradio").click();才能成功触发change事件。
checkbox的change事件同样也是click和change两种方式绑定,这里建议用click,因为change事件无法动态触发。
<div class="mui-input-row mui-checkbox mui-left">
<label>违法改扩建</label>
<input id="wfgkj" name="checkbox1" value="违法改扩建" type="checkbox" >
</div>
$("#wfgkj").click(function () {
var val = $(this).prop("checked");
if (val) {
//相关操作
}
else {
//相关操作
}
});
同样,通过 $("#wfgkj").click();动态触发change事件。