javascript - How to check a set of radio buttons that all are selected?

Question

I've a list of radio buttons that are generated dynamically. The names of radio buttons are also generated dynamically. The first row of radio buttons has name 1, the second row radio buttons have name 2. Each row has three radio buttons with same name but different values.

How can I check using jquery that one radio button is selected in each row when submitting the form?

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

score 2 · Accepted Answer

ラジオボタンの各行が特定の要素 (例: a<fieldset>または a <tr>) にラップされていると仮定すると、(送信イベントで) ラッパー要素の量が選択されたラジオの数と等しいかどうかを簡単に確認できます。

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

score 0 · Accepted Answer

このような：

デモ： http： //jsfiddle.net/K2WsA/ および更新されたコードとマイナーな変更から：http：//jsfiddle.net/K2WsA/1/

動作：デモでは、両方のグループから少なくとも1つを選択すると、アラートが表示されます。

それが役に立てば幸い！

名前に従ってそれらをグループ化します。

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

score 0 · Accepted Answer

＃row1、＃row2のような行にクラスまたはIDを追加できると思います。その後はかなり簡単です

//最初の行でチェックされたラジオボタンの数を示します
// $（'input [type = radio]：checked'、'＃row1'）

//2行目でチェックされているラジオボタンの数を示します
// $（'input [type = radio]：checked'、'＃row2'）

if（$（'input [type = radio]：checked'、'＃row1'）。length> 0 and $（'input [type = radio]：checked'、'＃row2'）> 0）{

 //コードはここにあります
}

score 0 · Accepted Answer

これを試して

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

score 0 · Accepted Answer

以下のデモリンクで、上記の問題の完全なビンを作成しました。それがあなたを助けるかもしれないので、一度チェックしてください。

デモ： 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);
            }
        });
    });
});

デモ： http ：//codebins.com/bin/4ldqp9l

javascript - How to check a set of radio buttons that all are selected?

5 に答える 5

Related

Reference