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 thecheckedattribute

By setting the single button With thecheckedattribute 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 thecheckedattribute to one of them to check it:

  Apple    Banana    Pear 

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

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

checkedattribute. We can also use thecheckedattribute to set the checked state of the radio button. Iftrueis assigned to it, the radio button can be set to the checked state; iffalseAssign a value to it to cancel the selected state of the radio button.

Use
2. setAttributemethod

checkedattribute, we can also usesetAttributeMethod to set radio button options. For example, we can create a radio button group and use thesetAttributemethod to select one of the options:

  Apple    Banana    Pear 

// 获取单选框元素 var appleRadio = document.querySelector('input[value="apple"]'); // 使用setAttribute方法设置单选框为选中状态 appleRadio.setAttribute("checked", "checked");

querySelectormethod Get the radio button element with the value "apple", and then use thesetAttributemethod to set it to the selected state.

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

checkedattribute or thesetAttributemethod. Although both methods can achieve the same effect, it is recommended to use thecheckedattribute 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!