4

アップデート:

私のコードは次のようになりました:(動作します)。

   $(document).ready(function(){
         $("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).attr("checked",false);
$(this).attr("checked",true);
 });


          });   

HTML:

     <input type="checkbox" name="swimming" class="chb" />
     <input type="checkbox" name="swimming" class="chb" />
     <input type="checkbox" name="swimming" class="chb" />

質問ごとに3つのチェックボックスがあるアンケートタイプのフォームがあり、ユーザーが3つのうち1つだけを選択できるようにしたいと思います。

私のHTMLは次のようなものです。

質問1:

             <input type="checkbox" name="ballet" />
             <input type="checkbox" name="ballet" />
             <input type="checkbox" name="ballet" />

質問2:

             <input type="checkbox" name="swimming" />
             <input type="checkbox" name="swimming" />
             <input type="checkbox" name="swimming" />

ただし、これにより、ユーザーは特定の質問のすべてのチェックボックスを選択できます。そして、3つのうち1つだけを選択できるようにしたいと思います。これに対する解決策はありますか?

ありがとう

4

5 に答える 5

16

こちらのデモ

$(':checkbox').on('change',function(){
 var th = $(this), name = th.attr('name'); 
 if(th.is(':checked')){
     $(':checkbox[name="'  + name + '"]').not(th).prop('checked',false);   
  }
});

コメントによると、ユーザーは最初の3つのチェックボックスから1つ、次の3つのチェックボックスから1つを選択できる必要があると思います。名前の属性が異なるためです。これがデモです。

 $("input:checkbox").change(function(){
 var group = ":checkbox[name='"+ $(this).attr("name") + "']";
   if($(this).is(':checked')){
     $(group).not($(this)).attr("checked",false);
   }
 });
于 2013-02-17T04:59:08.303 に答える
7

divを使用してみることができます。

 <div id="checkboxGroup">
<input type="checkbox" name="ballet" />
<input type="checkbox" name="ballet" />
<input type="checkbox" name="ballet" />
</div>

$('#checkboxGroup input[type=checkbox]').change(function() {
if (this.checked) {
    $('#checkboxGroup input[type=checkbox]').not(
                        $(this)).prop('checked', false);
    }
});

フィドルを参照してください

于 2014-01-21T05:02:24.420 に答える
3

ラジオボタンは行く方法です。必要に応じて、入力タグ内の属性として「チェック済み」という単語を追加することにより、オプションの1つを事前に選択することもできます。

<input type="radio" name="ballet" value="1" checked />
<input type="radio" name="ballet" value="2" />
<input type="radio" name="ballet" value="3" />
于 2013-02-17T04:56:23.260 に答える
2

これは、HTMLラジオボタンと呼ばれます。ラジオボタンはグループ化されており、ラジオボタンの概念は、グループ内で一度に1つだけを選択できるというものです。

name属性は、ラジオボタンのグループの名前です。

<input type="radio" name="ballet" value="1" />
<input type="radio" name="ballet" value="2" />
<input type="radio" name="ballet" value="3" />

ラジオボタンなどのグループを含むチェックボックス

「x」はクラスですが、「name」属性は必要なグループであることに注意してください。

$(".x").click( function() {
    var n = $(this).attr('name');
    $("[name=" + n + ']').prop("checked", false);
    $(this).prop("checked", true);
});

<input type="checkbox" name="swimming" class="x" />
             <input type="checkbox" name="swimming" class="x" />
             <input type="checkbox" name="swimming" class="x" />

<br/>

<input type="checkbox" name="diving" class="x" />
             <input type="checkbox" name="diving" class="x" />
             <input type="checkbox" name="diving" class="x" />
于 2013-02-17T04:36:41.230 に答える
0

チェックボックスの場合:

$("input:checkbox").click(function () {
    $("[name="+$(this).prop('name')+"]").prop("checked", false);
    $(this).prop("checked", true);
});

代わりにラジオを使用できます。

Fiddle For Checkboxes

于 2013-02-17T04:38:57.807 に答える