javascript - select two radio buttons with the same name, id, value - Stack Overflow

admin管理员组

文章数量:1391836

On my page I have two radio buttons for yes and two for no. How I can do it if I check yes in one place it check second yes button or if I check no the second no will check too.

Following is my code:

<fieldset>
   <input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
   <input class="input-long" id="size10" name="size10" type="text" value="27">
   <br>
   <input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
   <input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
   <br>
   <input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
   <input class="input-long" id="size20" name="size20" type="text" value="65">
   <br>
   <input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
   <input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
   <br>
</fieldset>

how i can select two radios at the same time?

On my page I have two radio buttons for yes and two for no. How I can do it if I check yes in one place it check second yes button or if I check no the second no will check too.

Following is my code:

<fieldset>
   <input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
   <input class="input-long" id="size10" name="size10" type="text" value="27">
   <br>
   <input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
   <input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
   <br>
   <input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
   <input class="input-long" id="size20" name="size20" type="text" value="65">
   <br>
   <input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
   <input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
   <br>
</fieldset>

how i can select two radios at the same time?

• javascript
• jquery
• html

Share Improve this question Follow edited Sep 4, 2015 at 7:41 Srinu Chinka 1,4911313 silver badges1919 bronze badges asked Sep 4, 2015 at 7:14 mr g9961013mr g9961013 2111 silver badge22 bronze badges 3

• 3 id must be unique, always – Tushar Commented Sep 4, 2015 at 7:15
• is there any reason of keeping same Ids, it should be unique on page – Nikhil Maheshwari Commented Sep 4, 2015 at 7:23
• Keeping the same id to the several element is the bad idea. Instead use class and use check box to check it – Rajesh kannan Commented Sep 4, 2015 at 7:25

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You can't have more than one button checked in the same radio group. You need to give the two sets different names. I used search_by_range_A and search_by_range_B. Also IDs have to be unix.

To make it automatically check the other button, use a .change() handler that gets the value and then selects the other checkbox with the same value and checks it.

$(":radio").change(function() {
  var value = $(this).val();
  $(":radio[value=" + value + "]").prop("checked", true);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
  <input checked="checked" id="search_by_range_A_no" name="search_by_range_A" type="radio" value="no">
  <input class="input-long" id="size10" name="size10" type="text" value="27">
  <br>
  <input id="search_by_range_A_yes" name="search_by_range_A" type="radio" value="yes">
  <input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
  <br>
  <input checked="checked" id="search_by_range_B_no" name="search_by_range_B" type="radio" value="no">
  <input class="input-long" id="size20" name="size20" type="text" value="65">
  <br>
  <input id="search_by_range_B_yes" name="search_by_range_B" type="radio" value="yes">
  <input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
  <br>
</fieldset>

And again...ID of every element on a webpage should be Unique!

Use classes instead.

But nevertheless, it is still possible to achieve that. The only thing you have to change in your code is the name of the radio button because all radio buttons with the same name are assumed to be a group, and the web-browser only allows selection of only one of them by default, and you cannot control that.

Therefore change the name to regroup the radio buttons into two different sets.

Then you can do this:

$("[id^='search_by_range']").change(function(){
    $("[id='"+$(this).attr("id")+"']").prop("checked", "checked");
});

Here is the JSFiddle demo

you can use javascript for this problem here i can give you hint how can you can do !

$('#search_by_range_yes').attr('checked','checked');
$('#search_by_range_yes').addAttr('checked');

this would help :)

thanks

In same group radio buttons you can't check more than one. I used two different groups for this.

Find the below code:

<fieldset>
   <input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
   <input class="input-long" id="size10" name="size10" type="text" value="27">
   <br>
   <input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
   <input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
   <br>
   <input checked="checked" id="search_by_range_no" name="search_by_range_second" type="radio" value="no">
   <input class="input-long" id="size20" name="size20" type="text" value="65">
   <br>
   <input id="search_by_range_yes" name="search_by_range_second" type="radio" value="yes">
   <input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
   <br>
</fieldset>

JS Code:

$(function() {
    $(":radio").on("change", function() {
        var val = $(this).val(), checked = this.checked;
        var others = $(":radio[value='"+val+"']").not(this);
        others.prop('checked', true);
    });
});

You can find the working demo here: http://jsfiddle/26g5rxs6/

1.i understand your problem these happens because all radio button has same name.

2.Same name radio button has one group and select only in that group.

3.You can group radio button by 1. search by no 2. search by range. i updated your code by following code.

<fieldset>
   <input checked="checked" id="search_by_range_no" name="search_by_no" type="radio" value="no">
   <input class="input-long" id="size10" name="size10" type="text" value="27">
   <br>
   <input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
   <input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
   <br>
   <input checked="checked" id="search_by_range_no" name="search_by_no" type="radio" value="no">
   <input class="input-long" id="size20" name="size20" type="text" value="65">
   <br>
   <input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
   <input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
   <br>
</fieldset>

本文标签： javascriptselect two radio buttons with the same nameIdvalueStack Overflow