0

フォーム内のラジオ ボタンの範囲。jQuery は、各グループでラジオが選択されていることを確認し、そうでない場合は関連付けられたラベルにクラスを追加します。

確認したところ、グループの名前が変数 'radio' に正しく追加されています。何か案は？

$('.checkbox', this).each(function()
{
    var radio = $(this).attr("name");
    if ($('input[name='+ radio +']:checked').length) 
    {
        $('label[for=' + radio + ']').addClass('error_label');
        required = false;
    }
    else 
    {
        $('label[for=' + radio + ']').removeClass('error_label');
    }
});
4

2 に答える 2

2

クラスを追加するときは、次のように確認する必要があると思います。

if ($('input[name=' + radio + ']:radio:checked').length == 0) {
    // Add class...
}
于 2012-10-14T11:00:29.490 に答える
1

これがより効率的なアプローチです。また、グループ内のすべてのラジオボタンラベルに「error」クラスを追加したくない場合もあります。

こちらをご確認ください

===回答にコードを含めるように更新===

HTML

<div class="radio-group">
    <h3>Group 1</h3>
    <input type="radio" name="group_1" id="opt1" value="1" />
    <label for="opt1">Option 1</label>
    <br />
    <input type="radio" name="group_1" id="opt2" value="2" />
    <label for="opt2">Option 2</label>
    <br />
    <input type="radio" name="group_1" id="opt3" value="3" />
    <label for="opt3">Option 3</label>
    <br />
</div>
<div class="radio-group">
    <h3>Group 2</h3>
    <input type="radio" name="group_2" id="opt4" value="1" />
    <label for="opt4">Option 1</label>
    <br />
    <input type="radio" name="group_2" id="opt5" value="2" />
    <label for="opt5">Option 2</label>
    <br />
    <input type="radio" name="group_2" id="opt6" value="3" />
    <label for="opt6">Option 3</label>
</div>
<div class="radio-group">
    <h3>Group 3</h3>
    <input type="radio" name="group_3" id="opt8" value="1" />
    <label for="opt8">Option 1</label>
    <br />
    <input type="radio" name="group_3" id="opt9" value="2" />
    <label for="opt9">Option 2</label>
    <br />
    <input type="radio" name="group_3" id="opt10" value="3" />
    <label for="opt10">Option 3</label>
</div>
<div>
    <input type="button" id="submit" value="Submit" />
</div>

JavaScript

$(function(){
    $("#submit").click(function(){
        $(".radio-group").each(function(){
            if($(this).find("input:radio:checked").length) {
                $(this).removeClass("error");
            }
            else {
                $(this).addClass("error");
            }
        });
    });
});​
于 2012-10-14T11:33:07.660 に答える