radio：未选中状态基础上点击一次，选中；选中状态基础上点击一次，取消选中

最新推荐文章于 2025-07-25 10:56:50 发布

原创最新推荐文章于 2025-07-25 10:56:50 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

java小知识点专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现单选按钮（radio）的自定义交互方式：支持单击选中及取消选中功能，并展示了如何通过代码获取已选中的radio按钮及其值。

html:

//如果几个radio的name是相同的，则只能单选，即不能同时勾选几个
//name不同时，则可以像checkbox一样同时多选

<input type="radio" tag="0" name="radio1" id="radio1" style="font-weight: 400;" value="1"/>
<input type="radio" tag="0" name="radio2" id="radio2" style="font-weight: 400;" value="2"/>
<input type="radio" tag="0" name="radio3" id="radio3" style="font-weight: 400;" value="3"/>
<input type="radio" tag="0" name="radio4" id="radio4" style="font-weight: 400;" value="4"/>





js:
//要求：
	1、未选中状态基础上点击一次，选中
	2、选中状态基础上点击一次，取消选中

	/* 单选按钮radio */
		$(":radio").click(function () {
                var r = $(this).attr("name");
                $(":radio[name=" + r + "]:not(:checked)").attr("tag", 0);	//获取点击radio的tag值
                if ($(this).attr("tag") == 1) {
                    $(this).attr("checked", false);
                    $(this).attr("tag", 0);
                }
                else {
                    $(this).attr("tag",1);
                }
           });






	var objs = $('input[type="radio"]:checked');	//选中的radio


	var rows =objs.size();		//选中的radio个数


	 for(var i=0; i<rows; i++){
	    alert(objs.get(i));	//第i个radio

	    objs.get(i).value	//第i个radio的value值（通过获取到的value不同，确定获取了那些数据）




	//radio显示从数据库中查出来的数据

	(	1、radio的name都一样，value不一样
		2、${recentReport.crtDimensionType}是在action中setAttribute的数据
	)

	$(":radio[value=${recentReport.crtDimensionType}]").attr("checked", true);