javascript dom設定單選框的選項

DOM (Document Object Model) 是一種用於處理HTML和XML文件的API (應用程式介面)，它提供了一種存取文件的方式，使得開發者可以透過JavaScript 腳本改變頁面的結構和內容。在 Web 開發中，DOM 是非常重要的，因此了解 DOM 中如何設定單選框的選項是非常有用的。

單選框是一種 HTML 表單元素，通常用於讓使用者從多個選項中選擇一個。在DOM 中，要設定單選框的選項，我們可以使用以下兩種方法：

1. 使用checked 屬性

透過設定單選框的checked 屬性，我們可以選取單選框的某個選項。例如，我們可以建立一個單選框組並給其中一個設定checked 屬性來選取它：

<label>
  <input type="radio" name="fruit" value="apple" checked>
  Apple
</label>
<label>
  <input type="radio" name="fruit" value="banana">
  Banana
</label>
<label>
  <input type="radio" name="fruit" value="pear">
  Pear
</label>

在上面的範例中，我們給第一個單選框設定checked 屬性來選取它。請注意，這會使第一個單選框預設選中，即使使用者沒有點擊它。

要使用JavaScript 存取和修改單選框的checked 屬性，我們可以使用以下程式碼：

// 获取单选框元素
var appleRadio = document.querySelector('input[value="apple"]');

// 检查单选框是否处于选中状态
console.log(appleRadio.checked); // true

// 设置单选框为选中状态
appleRadio.checked = true;

// 取消单选框的选中状态
appleRadio.checked = false;

在上面的程式碼中，我們首先取得了值為"apple" 的單選框元素，然後存取了它的checked 屬性。我們也可以使用checked 屬性來設定單選框的選取狀態，例如將true 賦值給它，就可以將單選框設為選取狀態；將false 賦值給它，則可以取消單選框的選取狀態。

2. 使用setAttribute 方法

#除了使用checked 屬性外，我們還可以使用setAttribute方法來設定單選框的選項。例如，我們可以建立一個單選框組，並使用setAttribute 方法來選取其中一個選項：

<label>
  <input type="radio" name="fruit" value="apple">
  Apple
</label>
<label>
  <input type="radio" name="fruit" value="banana">
  Banana
</label>
<label>
  <input type="radio" name="fruit" value="pear">
  Pear
</label>

// 获取单选框元素
var appleRadio = document.querySelector('input[value="apple"]');

// 使用setAttribute方法设置单选框为选中状态
appleRadio.setAttribute("checked", "checked");

在上面的程式碼中，我們使用querySelector 方法取得了值為"apple" 的單選框元素，然後使用setAttribute 方法將其設定為選取狀態。

要注意的是，使用setAttribute 方法來設定單選框的選取狀態會使HTML 原始碼中也顯示出來，而使用checked 屬性則不會。此外，也建議使用 checked 屬性來設定單選框的選取狀態，因為它更簡潔且易於理解。

總結

在 DOM 中，設定單選框的選項可以透過 checked 屬性或 setAttribute 方法來完成。雖然兩種方法都可以達到相同的效果，但建議使用 checked 屬性，因為程式碼更簡潔、更容易理解，而且操作更方便。在實際的專案中，選用哪一種方法由開發者自己決定。

以上是javascript dom設定單選框的選項的詳細內容。更多資訊請關注PHP中文網其他相關文章！