Question

>> Fiddle <<

So, this fiddle works as it should: when two radio’s with a different name attribute are checked, text is shown which echoes the values of these buttons.

However, what if there are more radio’s? I don’t want to keep adding lines and vars for every name attribute.

I thought it might be possible to replace the names with values that end with numerals like such:

<input type="radio" name="score1" value="0"> 0
<input type="radio" name="score1" value="1"> 1<br/>
<input type="radio" name="score2" value="0"> 0
<input type="radio" name="score2" value="1"> 1<br />
<input type="radio" name="score3" value="0"> 0
<input type="radio" name="score3" value="1"> 1<br/>
<input type="radio" name="score4" value="0"> 0
<input type="radio" name="score4" value="1"> 1

This way, it should be possible to loop through the names and find the checked value for every "input[name='score" + i + "']" in which case is a natural number. When this value is known, it could be echoed with an each function. So, no matter how many radio buttons are available, the script always works (and shouldn’t be too many lines).

Of course, this is how I see this in my head but I have no idea how one could really write a script like that. I’m not familiar with infinite number loops and the use of i and ii.

Interesting articles concerning this are welcome as well!

Answer 1

How about this:

$( ":radio" ).on( "click", function () {
        var html = ""
        $(':radio :checked').each(function(){
            html += "<span>" + $(this).val() + "</span> - ";
        });
        $( "div#result" ).html(html).show();
});