如何设置radio被选中

一、基本思路

radio是input标签的一种，通过设置其checked属性为true可以实现被选中的效果，具体操作如下：

<input type="radio" id="radio1" name="sex" value="male">
男
<input type="radio" id="radio2" name="sex" value="female">
女

//设置radio1被选中
document.getElementById("radio1").checked = true;

通过获取radio元素的id或者name属性，并将相应的checked属性设置为true即可实现选中效果。需要注意的是，name属性是用来将一组radio标签绑定在一起的，只要它们的name属性值相同，表示它们是一组radio，用户只能选择其中的一个。

二、JQuery实现

在使用Jquery库的情况下，我们可以使用.prop()方法来操作选中效果，实现代码如下：

<input type="radio" id="radio1" name="sex" value="male">
男
<input type="radio" id="radio2" name="sex" value="female">
女
 
//设置radio1被选中
$("#radio1").prop("checked", true);

使用JQuery可以简化代码，使代码更加简洁易懂。

三、CSS样式控制

除了使用JS或者JQuery来操作radio被选中外，我们还可以使用CSS样式来控制，例如：

input[type="radio"]:checked + label {
  color: red;
}

上述代码表示当radio被选中时，其相邻的label标签会变成红色。通过这种方式，我们可以给用户一种视觉上的提示，告诉他们哪一个选项是被选中的。

四、案例演示

下面是一个通过JS实现radio被选中效果的案例：

  
  
  
  


  <input type="radio" id="radio1" name="sex" value="male">
  男
  <input type="radio" id="radio2" name="sex" value="female">
  女
  选中第一个
  选中第二个

  <script>
    function setRadio() {
      var radio1 = document.getElementById("radio1");
      var radio2 = document.getElementById("radio2");
      
      if (event.target.innerText == "选中第一个") {
        radio1.checked = true;
      } else {
        radio2.checked = true;
      }
    }
  </script>