How to set radio selection based on value in jquery

With the continuous development of Internet technology, front-end is undoubtedly one of the hottest fields. In front-end development, jquery is a very popular JavaScript library and is widely used in the development and maintenance of various websites and applications. In this article, I will introduce how to use jquery to set radio selection based on value.

1. Introduction to radio control

The radio control is also called a radio button. It is a control in an HTML form and is designed to allow users to select only one of multiple options. . Radio controls are usually implemented using a set of identical radio buttons, organized into a group of which only one can be selected.

In HTML, radio controls are usually defined using input tags, where the type attribute is radio, the name attribute is the name of a group of radio buttons, and the value attribute is the value of each radio button, as shown below ：

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>

2. Method of using jquery to set radio selection based on value

Sometimes, we need to use jquery to dynamically set the selected state of the radio control. Below, I will introduce two methods to achieve the effect of setting radio selection based on value.

1. Use the attr method

The attr method is used to get or set the value of the specified attribute. When selecting and unchecking the radio control, you can use this method to set the value of its checked attribute.

For example, we have a radio control group with an id of gender. We can use the following code to set the selected state of the corresponding radio button:

// 根据值设置radio选中
$("input[name='gender'][value='male']").attr("checked", true);

// 取消选中
$("input[name='gender'][value='female']").attr("checked", false);

As shown above, we first pass the selector Select the male and female radio buttons in the form, and then use the attr method to set the value of its checked attribute to implement the selecting and unchecking operations.

2. Use the prop method

The prop method is essentially similar to the attr method, which is used to get or set the attribute value of the element. The difference is that the prop method is used to operate Boolean attributes, such as checked, selected, disabled, etc., while the attr method is used to operate non-Boolean attributes.

It is also very simple to set the checked and unchecked status of the radio control through the prop method. You also need to use the corresponding selector to select the radio control, and then use the prop method to set the value of its checked attribute.

For example, the following code can set the selected and unchecked states of the radio control based on its value:

// 根据值设置radio选中
$("input[name='gender'][value='male']").prop("checked", true);

// 取消选中
$("input[name='gender'][value='female']").prop("checked", false);

3. Summary

In this article, I introduced the jquery There are two ways to set the radio selection based on the value, using the attr method and the prop method. Both methods are very simple, just select the radio control through the selector, and then use the attr or prop method to set the value of its checked attribute. I hope this article can be helpful to everyone when encountering similar problems in front-end development.

The above is the detailed content of How to set radio selection based on value in jquery. For more information, please follow other related articles on the PHP Chinese website!