jquery sets selected event for radio button

In web development, the radio button is a common user input box, which allows the user to select one of multiple options. In some cases, we need to handle the radio button selected by the user accordingly, such as displaying different content based on the selected radio button. So at this time, we need to use jQuery to help us implement the selection event of the radio button. This article will show you how to use jQuery to set a check event for a radio button.

1. Preparation work

Before using jQuery to set the selected event for the radio button, you need to introduce the jQuery library into the web page first. You can download the latest version of jQuery from the jQuery official website library, and then introduce it into the HTML file:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. HTML structure of the radio button

When setting the selected event of the radio button, you first need to understand the single button The HTML structure of the marquee. The radio button box consists of an input label and the corresponding label label. The type attribute in the input label is set to radio, indicating that this is a radio button box. At the same time, the input label needs to set the name attribute so that the same group of radio button boxes can be combined. Group.

A simple radio button structure is as follows:

<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>

<input type="radio" name="gender" value="female" id="female">
<label for="female">女</label>

In the above code, we created two radio button boxes, they both belong to the same group, because their name attributes are set to gender. Interestingly, the value of the for attribute of the label label needs to be consistent with the value of the id attribute of the input, so that when the user clicks on the label label, the corresponding radio button will be automatically selected.

3. Bind selected event

When the user selects the radio button, we need to handle it accordingly. In order to achieve this function, we need to use jQuery's .change() method, which will trigger the corresponding event handling function when the selected state of the radio button changes.

A simple code to bind a selected event to a radio button box is as follows:

$('input[type="radio"]').change(function() {
  // 在这里编写选中事件的相关代码
});

In the above code, we use a jQuery selector to select all radio button boxes, and then An event handling function is bound through the .change() method, which will be triggered when the selected state of the radio button changes.

4. Related operations

After binding the selection event, you can handle the selected state of the radio button accordingly. The following are some common operations:

1. Get the selected status

You can use the .prop() method to get the selected status of the radio button, which will return true or false Indicates whether the radio button is selected.

$('input[type="radio"]').change(function() {
  if ($(this).prop('checked')) {
    console.log($(this).val() + '被选中了');
  } else {
    console.log($(this).val() + '没有选中');
  }
});

In the above code, we use the .prop() method to obtain the selected status of the radio button, and then output the corresponding prompt information based on the selected status.

2. Hide/Show Elements

Sometimes, we need to show or hide certain elements based on the radio button selected by the user. You can use the .hide() method and the .show() method to hide or show elements.

$('input[type="radio"]').change(function() {
  if ($(this).val() === 'male') {
    $('#male-info').show();
    $('#female-info').hide();
  } else {
    $('#male-info').hide();
    $('#female-info').show();
  }
});

In the above code, different elements are displayed or hidden according to the radio button selected by the user. The .show() method and .hide() method are used here to display or hide the elements.

5. Summary

This article introduces how to use jQuery to set the selected event for the radio button box. By binding the event handler function, you can realize that when the selected state of the radio button box changes, Perform corresponding operations, such as getting the selected status of the radio button, hiding or showing the element. The excellent features of jQuery allow developers to easily and quickly implement various functional requirements. I hope this article will be helpful to you.

The above is the detailed content of jquery sets selected event for radio button. For more information, please follow other related articles on the PHP Chinese website!