javascript dom sets radio button options

DOM (Document Object Model) is an API (Application Programming Interface) for processing HTML and XML documents. It provides a way to access documents, allowing developers to change the structure and content of the page through JavaScript scripts. . In web development, the DOM is very important, so it is very useful to understand how to set radio button options in the DOM.

A radio button is an HTML form element usually used to allow users to select one from multiple options. In the DOM, to set the options of the radio button, we can use the following two methods:

1. Use the checked attribute

By setting the single button With the checked attribute of the check box, we can check an option of the radio button. For example, we can create a group of radio buttons and set the checked attribute to one of them to check it:

<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>

In the above example, we set # to the first radio button. ##checked property to check it. Note that this will make the first radio button selected by default, even if the user doesn't click on it.

To access and modify the

checked attribute of the radio button using JavaScript, we can use the following code:

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

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

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

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

In the above code, we first obtain the value of "apple" radio button element, and then access its

checked attribute. We can also use the checked attribute to set the checked state of the radio button. If true is assigned to it, the radio button can be set to the checked state; if false Assign a value to it to cancel the selected state of the radio button.

Use
2. setAttribute method

In addition to using the

checked attribute, we can also use setAttribute Method to set radio button options. For example, we can create a radio button group and use the setAttribute method to select one of the options:

<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");

In the above code, we use the

querySelector method Get the radio button element with the value "apple", and then use the setAttribute method to set it to the selected state.

It should be noted that using the

setAttribute method to set the checked state of the radio button will also be displayed in the HTML source code, but using the checked attribute will not meeting. In addition, it is also recommended to use the checked attribute to set the checked state of the radio button because it is more concise and easier to understand.

Summary

In the DOM, setting the options of the radio button can be done through the

checked attribute or the setAttribute method. Although both methods can achieve the same effect, it is recommended to use the checked attribute because the code is more concise, easier to understand, and more convenient to operate. In actual projects, it is up to the developer to decide which method to use.

The above is the detailed content of javascript dom sets radio button options. For more information, please follow other related articles on the PHP Chinese website!