jQuery find dynamic input name

Question

I have a simple form with radio buttons

<form>
<input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
</form>

And i have additional div with same radios (without form)

<div class="attributes">
<input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
</div>

I want to make radios with same name and value in FORM to be checked when i check radios in DIV

How can i make it?

Using jQuery, select the div inputs: $("div input[type='radio']") then add a click method to them and when you click those radio buttons, it checks all others, compares the name and value to other radios, and checks them if they match. — Sterling Archer
– Sterling Archer, Commented Aug 22, 2016 at 13:17

Pranav C Balan · Accepted Answer · 2016-08-22 13:23:38Z

3

Attach a change() event handler then get the corresponding element in form using attribute equals selector and set it's checked property using prop() method.

$('.attributes :radio').change(function() {
  $('form [name="radio_1"][value="' + this.value + '"]').prop('checked', this.checked);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="radio" name="radio_1" value="1" />Radio 1
  <input type="radio" name="radio_1" value="2" />Radio 2
  <input type="radio" name="radio_1" value="3" />Radio 3
</form>

<div class="attributes">
  <input type="radio" name="radio_1" value="1" />Radio 1
  <input type="radio" name="radio_1" value="2" />Radio 2
  <input type="radio" name="radio_1" value="3" />Radio 3
</div>

edited Aug 22, 2016 at 13:23

answered Aug 22, 2016 at 13:18

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ehsan · Accepted Answer · 2016-08-22 13:29:13Z

Use this code :

$(".attributes :radio").on("change",function(){

$("form input[value = " + $(this).val() + "]").prop("checked",$(this).prop("checked"));

})

Final code :

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form>
            <input type="radio" name="radio_1" value="1" />Radio 1
            <input type="radio" name="radio_1" value="2" />Radio 2
            <input type="radio" name="radio_1" value="3" />Radio 3
        </form>
        <div class="attributes">
            <input type="radio" name="radio_1" value="1" />Radio 1
            <input type="radio" name="radio_1" value="2" />Radio 2
            <input type="radio" name="radio_1" value="3" />Radio 3
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
               $(".attributes :radio").on("change",function(){
                   $("form input[value = " + $(this).val() + "]").prop("checked",$(this).prop("checked"));
               })
            })
        </script>
    </body>
</html>

PeterKA · Accepted Answer · 2016-08-22 14:04:19Z

This should do it! It will work with multiple groups of checkboxes as demonstrated in the demo.

    $('div :radio').change(function() {
        $('form :radio[name="' + this.name + '"][value="' + this.value + '"]').prop('checked', true);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
A: <input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
  
  <br>
B: <input type="radio" name="radio_2" value="1" />Radio 1
<input type="radio" name="radio_2" value="2" />Radio 2
<input type="radio" name="radio_2" value="3" />Radio 3
</form>

<div class="attributes">
A: <input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
    <br>
B: <input type="radio" name="radio_2" value="1" />Radio 1
<input type="radio" name="radio_2" value="2" />Radio 2
<input type="radio" name="radio_2" value="3" />Radio 3
</div>

epascarello · Accepted Answer · 2016-08-22 13:20:53Z

There are a few ways to do it, but simple way would be to make a selector based on name and value.

$('input[type="radio"]').on("change", function () {
     $('input[type="radio"][name="'+this.name+'"][value="'+this.value+'"]').prop("checked", true);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
</form>


<div class="attributes">
<input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
</div>

Haresh Vidja · Accepted Answer · 2016-08-22 13:27:43Z

You can use <lable> tag and add for attribute which refers identifier of radio button. as mentioned below

Also I have added javascript for select same radia button vise-e-versa.

$('form input[type="radio"], attribute input[type="radio"]').click(function(){
  //alert($(this).attr('name')+"::"+$(this).attr('value'));
 $('input[name="'+$(this).attr('name')+'"][value="'+$(this).attr('value')+'"]').not(this).trigger('click');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form>
<input type="radio" name="radio_1" id="radio_11" value="1" /><label for="radio_11" >Radio 1</label>
<input type="radio" name="radio_1" id="radio_12" value="2" /><label for="radio_12" >Radio 1</label>
<input type="radio" name="radio_1" id="radio_13" value="3" /><label for="radio_13" >Radio 1</label>
</form>

<div class="attributes">
<input type="radio" name="radio_1" id="radio_21" value="1" /><label for="radio_21" >Radio 1</label>
<input type="radio" name="radio_1" id="radio_22" value="2" /><label for="radio_22" >Radio 1</label>
<input type="radio" name="radio_1" id="radio_23" value="3" /><label for="radio_23" >Radio 1</label>
</div>

Collectives™ on Stack Overflow

jQuery find dynamic input name

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related