1. Radio grouping As long as the name is the same, they are a group, that is, only one can be selected in a group, as follows: Copy code The code is as follows:<span>group1:</span> <input type="radio" id="radio1" checked="checked" name="group1" />radio1 <input type="radio" id="radio2" name="group1" />radio2 <input type="radio" id="radio3" name="group1" />radio3 <span>group2:</span> <input type="radio" id="radio4" checked="checked" name="group2" />radio4 <input type="radio" id="radio5" name="group2" />radio5 <input type="radio" id="radio6" name="group2" />radio6 The effect is as follows: ![]() 2. Get the selected radio node This can be easily done using jQuery. First select the group, then filter out the checked ones, as follows: Copy code The code is as follows:var group1 = $("[name='group1']").filter(":checked"); console.log(group1.attr("id")); 3. Select a radio node Use jQuery to set the checked attribute: Copy code The code is as follows:$("#radio2").attr("checked", "checked"); 4. Select a radio node Remove the checked attribute: Copy code The code is as follows:$("#radio1").removeAttr("checked"); This may result in a situation where none of the radios in a group are selected. 5. Register the selected and unselected events Or use jQuery's on function to register the change event, as follows: Copy code The code is as follows:$("[name='group1']").on("change", function (e) { console.log($(e.target).val()); } ); In this way, as long as any one in group1 is selected, the function will be triggered. |
<<: Perfect solution for theme switching based on Css Variable (recommended)
>>: Tutorial on using $attrs and $listeners in Vue
This article shares the specific code of Vue usin...
1. Download the software 1. Go to the MySQL offic...
mysql-5.7.19-winx64 installation-free version con...
step: 1. Create a new docker-compose.yml file in ...
Since HTML email is not an independent HOST page o...
When developing a mobile page recently, I encount...
The isnull() function cannot be used as a substit...
Table of contents 1. Default values for functio...
The following analysis is about product design pr...
With the continuous development of the Internet ec...
Copy code The code is as follows: <!--[if !IE]...
Table of contents Preface 1. Basic Data 2. Inheri...
Copy code The code is as follows: <object clas...
JS provides three methods for intercepting string...
1. Overview of viewport Mobile browsers usually r...