一、基本思路
radio是input标签的一种，通过设置其checked属性为true可以实现被选中的效果，具体操作如下：
//设置radio1被选中
document.getElementById("radio1").checked = true;
通过获取radio元素的id或者name属性，并将相应的checked属性设置为true即可实现选中效果。需要注意的是，name属性是用来将一组radio标签绑定在一起的，只要它们的name属性值相同，表示它们是一组radio，用户只能选择其中的一个。
二、JQuery实现
在使用Jquery库的情况下，我们可以使用.prop()方法来操作选中效果，实现代码如下：
//设置radio1被选中
$("#radio1").prop("checked", true);
使用JQuery可以简化代码，使代码更加简洁易懂。
三、CSS样式控制
除了使用JS或者JQuery来操作radio被选中外，我们还可以使用CSS样式来控制，例如：
input[type="radio"]:checked + label {
color: red;
}
上述代码表示当radio被选中时，其相邻的label标签会变成红色。通过这种方式，我们可以给用户一种视觉上的提示，告诉他们哪一个选项是被选中的。
四、案例演示
下面是一个通过JS实现radio被选中效果的案例：
Radio测试 input[type="radio"]:checked + label { color: red; } function setRadio() { var radio1 = document.getElementById("radio1"); var radio2 = document.getElementById("radio2"); if (event.target.innerText == "选中第一个") { radio1.checked = true; } else { radio2.checked = true; } }
在上述案例中，我们定义了两个radio选项，通过点击按钮来控制选中哪一个，同时使用了CSS样式来给选中的选项添加了一个红色的标记。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/207277.html
微信扫一扫 
支付宝扫一扫 