CODEWITHSUNDEEP
javascriptjqueryhtml
mr g9961013
mr g9961013

Reputation: 21

select two radio buttons with the same name, id, value

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?

Upvotes: 2

Views: 7077

Answers (5)

Anurag Deokar
Anurag Deokar

Reputation: 849

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>

Upvotes: 0

Srinu Chinka
Srinu Chinka

Reputation: 1491

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.net/26g5rxs6/

Upvotes: 0

WhiteHawk
WhiteHawk

Reputation: 89

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

Upvotes: 0

Ahs N
Ahs N

Reputation: 8366

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

Upvotes: 1

Barmar
Barmar

Reputation: 780724

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.com/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>

Upvotes: 2

Related Questions