10

複数のラジオボタンをチェックしたいのですが、すべてのラジオボタンの名前は同じですがIDが異なります。

これが私のhtmlコードです。

 <span style="float:left;margin:0 0 0 10px">Proactivity</span>
        <label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Proactivity > Poor" name="q11[]">Poor</label>
        <label for="q11"  style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Proactivity > Good" name="q11[]">Good</label>

        <br/><br/>
        <span style="float:left;margin:0 0 0 10px">Service/support</span>
        <label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Service/support > Poor" name="q11[]">Poor</label>
        <label for="q11"  style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Service/support > Good" name="q11[]">Good</label>

        <br/><br/>
        <span style="float:left;margin:0 0 0 10px">Provision of <br />specialist skills</span>
        <label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Provision of specialist skills > Poor" name="q11[]">Poor</label>
        <label for="q11"  style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Provision of specialist skills > Good" name="q11[]">Good</label>
4

6 に答える 6

16

できません。ラジオ ボタンは、1 つの選択肢に対してあります。複数の選択肢がある場合は、チェックボックスが必要です。

于 2012-06-05T10:07:25.523 に答える
12

ラジオ ボタンを form タグでラップすると、同じ名前のラジオ ボタンのグループが互いに独立して機能できるようになります。

http://jsfiddle.net/8qB56/

しかし、何をしようとしているのかを見ると、単一のフォームのように見えるものを操作しているため、各論理質問の入力名を変更する方が適切です。

したがって、おそらく、積極的な質問の入力用、サービスの質問の入力用、およびプロビジョニングの質問の入力用name="q11[]"に変更できます。name="q11[proactivity]"name="q11[service]"name="q11[provision]"

これを行うと、これらの入力から選択されたすべての応答がサーバー側の q11 フィールドにとどまることができます。その後、必要に応じてデータをマッサージできます (q11 は「質問 11」などを表すと仮定しているため、これらすべての入力に対して同じ名前を維持することに固執します)。

于 2013-01-30T17:51:13.050 に答える
5

すべての無線入力に同じ名前を使用すると、それらはすべて 1 つのグループに分類されます。個別のアクションを実行することはできません。

ラジオグループごとに異なる名前を使用する必要があります

于 2012-06-05T10:18:02.883 に答える
3

ラジオ ボタンを使用して複数のアイテムを選択することは、ユーザビリティのルールに反するようです。その場合は、それらに別の名前を付けることができます。

PS: すべてのラジオ ボタンに外部スタイル シートを提供する必要があります。後で調整したい場合に便利です。

于 2012-06-05T10:10:08.470 に答える
1

それは動作しますplsはリンクをたどります

http://jsfiddle.net/Cwalkdawg/3CxLD/2/

Since you insist using radios, I would go with a jQuery library to get your values. You can add a class to your radios and it will allow you to select that class and iterate through it. It's counter-intuitive and dirty, but it will work. This markup:

<input type="radio" class="rad" name="None" value="--" />None
<br />
<input type="radio" class="rad" name="Item1" value="Item1" />Item1
<br />
<input type="radio" class="rad" name="Item2" value="Item2" />Item2
<br />
<input type="radio" class="rad" name="Item3" value="Item3" />Item3
<br />
<input type="radio" class="rad" name="Item4" value="Item4" />Item4
<br />

Goes with this jQuery:

$(document).ready(function () {
    $("#button").click(function () {
        // Radios
        $(".rad:checked").each(function() {
            console.log("Radio: " + $(this).val());
        });
    });
})

In the fiddle, I added checkboxes too, just to show you how much more easy it is i.e. the following markup (which reads easier and is not as ambiguous):

<input name="choices" type="checkbox" value="something1" />Option 1
<br />
<input name="choices" type="checkbox" value="something2" />Option 2
<br />
<input name="choices" type="checkbox" value="something3" />Option 3
<br />
<input name="choices" type="checkbox" value="something4" />Option 4
<br />

Goes with this jQuery:

$("#button").click(function () {
    //Check boxes
    $("input:checkbox[name=choices]:checked").each(function() {
        console.log("Checkbox: " + $(this).val());
    });
});

You can't deselect a radio button unless you want to deselect all of them using either a reset element, which will reset your entire form, or creating a custom function just for radios (that would clear all the choices anyway).

The deselect could be routed to your name=None radio button with the following code:

$(".rad[name=None]").click(function() {
    $(".rad").removeAttr("checked");
});
于 2014-05-17T07:06:46.443 に答える