jquery通过代码触发radio或者checkbox的change事件

最新推荐文章于 2025-02-18 00:32:21 发布

置顶周达

最新推荐文章于 2025-02-18 00:32:21 发布

阅读量5.3k

点赞数 1

分类专栏：前端文章标签： radio checkbox 动态触发change jquery

本文链接：https://blog.csdn.net/gis_zhouda/article/details/113882873

版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用jQuery在项目中实现动态设置mui框架下的radio和checkbox选中状态，同时避免频繁触发change事件，通过click方法模拟用户交互，以及正确绑定checkbox的change事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中有一个需求，需要通过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事件。