0

すべて、いくつかのラジオボックスを含むフォームを表示するための次のHTMLコードがあります。

<tr id="row1">
    <td align="center">
        <b>Dancefloor</b>
        <input type="hidden" name="question_id[]" value="2">
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_2" id="rating_value_2" value="5"
            required>
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_2" id="rating_value_2" value="4">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_2" id="rating_value_2" value="3">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_2" id="rating_value_2" value="2">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_2" id="rating_value_2" value="1">
        </div>
    </td>
</tr>
<tr bgcolor="#FFFFFF" id="row2">
    <td align="center">
        <b>Client Satisfaction</b>
        <input type="hidden" name="question_id[]" value="3">
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_3" id="rating_value_3" value="5"
            required>
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_3" id="rating_value_3" value="4">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_3" id="rating_value_3" value="3">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_3" id="rating_value_3" value="2">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_3" id="rating_value_3" value="1">
        </div>
    </td>
</tr>
<tr id="row3">
    <td align="center">
        <b>Overall Gig</b>
        <input type="hidden" name="question_id[]" value="1">
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_1" id="rating_value_1" value="5"
            required>
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_1" id="rating_value_1" value="4">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_1" id="rating_value_1" value="3">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_1" id="rating_value_1" value="2">
        </div>
    </td>
    <td align="center">
        <div style="text-align:center;">
            <input type="radio" name="rating_value_1" id="rating_value_1" value="1">
        </div>
    </td>
</tr>
<div id="radio_group_error"></div>

このコードはいくつかのPHPコードから生成されるため、ラジオボタンのグループを1つまたは複数にすることができます。私がやりたいのは、ページ上のグループごとに少なくとも1つのラジオボタンが選択されていることを確認することです（jQueryを使用してこのチェックを行います）。少なくとも1つのラジオグループが選択されていない場合は、radio_group_errordivにエラーを表示したいと思います。

これには1つまたは複数の異なる無線グループが存在する可能性があるため、これを行う方法についてのアイデアはありますか？

誰かがこのコードを編集して見栄えを良くすることができたら、遠慮なく！（ありがとうコリン）

4

1 に答える 1

1

あなたはこのようなことをすることができます：

var radios = $("input[type=radio]");
var group  = radios.filter("[name=rating_value_x]");
alert((group.filter(":checked").length)?"checked":"not checked");

これにより、グループxのラジオボタンがチェックされているかどうかがチェックされます。これで、すべてのグループを繰り返し処理して完了です。

例を参照してください

編集：

ループは次のようになります。

   var name = "rating_value_";
    var i = 1;
    var checked = true;
    // loop as long as there are groups available
    while( radios.filter("[name="+name+i+"]").length ){
       // check if there is a checked radio-button in this group
       if (!radios.filter("[name="+name+i+"]").filter(":checked").length){
          // selfdestruct
          checked = false;
       }
       i++;
    }       
    alert(checked?"check-check checked!":"check-check failed!");
于 2012-07-19T15:58:45.113 に答える