Comment vérifier un ensemble de boutons radio tous sélectionnés?

Question

J'ai une liste de boutons radio qui sont générés dynamiquement. Les noms des boutons radio sont également générés dynamiquement. La première rangée de boutons radio a le nom 1, les boutons radio de deuxième rangée ont le nom 2. Chaque rangée a trois boutons radio avec le même nom mais des valeurs différentes.

Comment puis-je vérifier à l'aide de jquery qu'un bouton radio est sélectionné dans chaque ligne lors de la soumission du formulaire?

<tr> 
          <th>1</th> 
          <td> Please select one option </td> 
          <td class='selectable_cell'> 
          <input type="radio" name="2" value="1" /> 
          </td> 
          <td class='selectable_cell'> 
          <input type="radio" name="2" value="2" /> 
          </td> 
          <td class='selectable_cell'> 
          <input type="radio" name="2" value="3" /> 
          </td> 
         </tr> 
<tr> 
          <th>2</th> 
          <td> Please select another option </td> 
          <td class='selectable_cell'> 
          <input type="radio" name="3" value="1" /> 
          </td> 
          <td class='selectable_cell'> 
          <input type="radio" name="3" value="2" /> 
          </td> 
          <td class='selectable_cell'> 
          <input type="radio" name="3" value="3" /> 
          </td> 
         </tr> 

Answer 1

En supposant que chaque rangée de boutons radio est enveloppé dans un élément spécifique (par exemple un <fieldset> ou un <tr>), vous pouvez facilement vérifier (à soumettre un événement) si la quantité d'éléments d'enveloppe est égal au nombre de radio sélectionné, avec

var group = $('#yourform tr'); 
if (group.length === group.find('input[type="radio"]:checked').length) { 
    /* you choose one radio for each group */ 
} 

Answer 2

comme ceci:

Démo:http://jsfiddle.net/K2WsA/et de votre code mis à jour et changement mineur: http://jsfiddle.net/K2WsA/1/

comportement

: dans la démo sélectionner au moins un à la fois le groupe et vous obtenir une alerte.

espérons que cela aide!

groupe

les selon les noms:

if($("input[type=radio][name=foo]:checked").length > 0 && 
    $("input[type=radio][name=bar]:checked").length > 0) 
{  
/* do something */ 
} 

Answer 3

Je pense que vous pouvez ajouter des classes ou ids aux lignes quelque chose comme # ligne1, # row2. Après que son assez facile

 
// gives you the no of radio buttons checked in first row 
// $('input[type=radio]:checked', '#row1') 

// gives you the no of radio buttons checked in second row 
// $('input[type=radio]:checked', '#row2') 

if($('input[type=radio]:checked', '#row1').length > 0 and $('input[type=radio]:checked', '#row2') > 0) { 

// your code goes here 
} 

Answer 4

Essayez cette

var names = {}; 
    $(':radio').each(function() { 
     names[$(this).attr('name')] = true; 
    }); 
var count = 0; 
$.each(names, function() { 
    count++; 
    }); 
if ($(':radio:checked').length === count) { 
    //All Checked 
} 

Answer 5

Voici le lien ci-dessous de démonstration, je l'ai fait pour les bacs complets ci-dessus problème. alors s'il vous plaît vérifier une fois qu'il peut vous aider.

Démo:http://codebins.com/bin/4ldqp9l

HTML:

<table id="table1" cellpadding="0" cellspacing="0" width="70%"> 
    <tr> 
    <th> 
     1 
    </th> 
    <td> 
     Please select one option 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd1" value="1" /> 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd1" value="2" /> 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd1" value="3" /> 
    </td> 
    </tr> 
    <tr> 
    <th> 
     2 
    </th> 
    <td> 
     Please select another option 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd2" value="1" /> 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd2" value="2" /> 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd2" value="3" /> 
    </td> 
    </tr> 
    <tr> 
    <th> 
     3 
    </th> 
    <td> 
     Please select another option 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd3" value="1" /> 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd3" value="2" /> 
    </td> 
    <td class='selectable_cell'> 
     <input type="radio" name="rd3" value="3" /> 
    </td> 
    </tr> 
</table> 
<br/> 
<input type="button" id="btncheck" name="btncheck" value="Check Radio Selection" /> 
<div id="result"> 
</div> 

CSS:

table#table1{ 
    border:1px solid #225599; 
} 
table#table1 th{ 
    border:1px solid #225599; 
    padding:2px; 
    background:#a48866; 
} 
table#table1 td{ 
    border:1px solid #225599; 
    padding:2px; 
    background:#94dbfd; 
} 
.error{ 
    color:#ca1619; 
} 
.success{ 
    color:#006633; 
} 

JQuery:

$(function() { 
    $("#btncheck").click(function() { 
     var result = ""; 
     $("table#table1").find("tr").each(function() { 
      var row = $.trim($(this).find("th").text()); 
      if ($(this).find("input[type=radio]:checked").length > 0) { 
       var opValue = $(this).find("input[type=radio]:checked").val(); 
       result += "<p class='success'>Row " + row + ": The option with value \"" + opValue + "\" has been selected... :)</p>"; 
      } else { 
       result += "<p class='error'>Row " + row + ": No option has been selected..!</p>"; 
      } 

      if (result != "") { 
       $("div#result").html(result); 
      } 
     }); 
    }); 
}); 

Démo:http://codebins.com/bin/4ldqp9l