如何設置radio被選中

一、基本思路

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被選中效果的案例：

  
  
  
    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樣式來給選中的選項添加了一個紅色的標記。