CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user4765675
user4765675

Reputation:

Event Listener for Multiple Radio Button Groups

How would you have a dynamic Javascript/JQuery event listener to know which radio button group is clicked and retrieve the value of the checked element. For example if I have two radio button groups how would I know which one is clicked? How would I do it for a dynamic number of button groups?

Example of two radio button groups: 

<div class="btn-group btn-group-vertical" data-toggle="buttons">
     <input type="radio" name="input1" value="option1"/>
     <input type="radio" name="input1" value="option2"/>
</div>
<div class="btn-group btn-group-vertical" data-toggle="buttons">
     <input type="radio" name="input2" value="option1"/>
     <input type="radio" name="input2" value="option2"/>
</div>

Edit: For anyone else wondering which of the following question below so far is "more" right, both are correct as .change(function(e) { is a shortcut for .on('click', function(e) {

Edit 2:Removed ID's

Upvotes: 11

Views: 17780

Answers (4)

Derek
Derek

Reputation: 3435

Find the name of the input on the change event.

$('input:radio').on('change', function(e){
  var name = e.currentTarget.name,
  value = e.currentTarget.value;
            
  $('.name').text(name);
  $('.value').text(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-group-vertical" data-toggle="buttons">
     <input type="radio" name="input1" id="input1" value="option1"/>
     <input type="radio" name="input1" id="input1" value="option2"/>
</div>
<div class="btn-group btn-group-vertical" data-toggle="buttons">
     <input type="radio" name="input2" id="input2" value="option1"/>
     <input type="radio" name="input2" id="input2" value="option2"/>
</div>
<p>Name: <b class="name"></b></p>
<p>Value: <b class="value"></b></p>

Upvotes: 4

Josue Morales
Josue Morales

Reputation: 751

Edit: For anyone else wondering which of the following question below so far is "more" right, both are correct as .change(function(e) { is a shortcut for .on('click', function(e) {

Yes, .change(function(e) { is a shortcut for .on('click', function(e) {, but when you are working with partial views for example in MVC, with .change(function(e) { the link or buttons in the page lose the hiperlink or don't work correctly, so you have to work with .on('click', function(e) { where the hiperlink work fine.

Upvotes: 0

Shaggy
Shaggy

Reputation: 6796

To provide a pure JavaScript solution: create a collection for all your radio type inputs and then loop through them all adding an event listener to each. Using this, you can then access any attributes or properties you wish and, if necessary, the parent element as well.

var inputs=document.querySelectorAll("input[type=radio]"),
    x=inputs.length;
while(x--)
    inputs[x].addEventListener("change",function(){
        console.log("Checked: "+this.checked);
        console.log("Name: "+this.name);
        console.log("Value: "+this.value);
        console.log("Parent: "+this.parent);
    },0);

Alternatively, as you mention that the number of groups is dynamic, you might need a live node list, which requires a little extra code to check the input type:

var inputs=document.getElementsByTagName("input"),
    x=inputs.length;
while(x--)
    if(inputs[x].type==="radio")
        inputs[x].addEventListener("change",function(){
            console.log("Checked: "+this.checked);
            console.log("Name: "+this.name);
            console.log("Value: "+this.value);
            console.log("Parent: "+this.parent);
        },0);

Upvotes: 11

ecarrizo
ecarrizo

Reputation: 2809

This jquery will execute a callback that print in the console the name and the value of the 'clicked' (not changed) radio button.

$('input:radio').on('click', function(e) {
    console.log(e.currentTarget.name); //e.currenTarget.name points to the property name of the 'clicked' target.
    console.log(e.currentTarget.value); //e.currenTarget.value points to the property value of the 'clicked' target.
});

try it: Fiddle

Upvotes: 10

Related Questions