javascript - jQuery find dynamic input name - Stack Overflow|江阴雨辰互联

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?

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?

Share Improve this question asked Aug 22, 2016 at 13:14 Albus One 1911 silver badge17 bronze badges

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, pares the name and value to other radios, and checks them if they match. – Sterling Archer Commented Aug 22, 2016 at 13:17

Add a ment |

5 Answers 5

Sorted by: Reset to default 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./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>

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

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

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

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

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745099658a4611195.html

javascript - jQuery find dynamic input name - Stack Overflow

5 Answers 5

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - jQuery find dynamic input name - Stack Overflow

5 Answers 5

相关推荐