2

私はこのようなHTMLを持っています：

<div id="SomeID">
 <div class="Wrapper">
    <input type="checkbox" class="SomeCheckboxClass">
    <input type="checkbox" class="SomeCheckboxClass">
    <input type="checkbox" class="SomeCheckboxClass">
 </div>

 <div class="Wrapper">
    <input type="checkbox" class="SomeCheckboxClass">
    <input type="checkbox" class="SomeCheckboxClass">
    <input type="checkbox" class="SomeCheckboxClass">
 </div>
</div>

ユーザーがチェックボックスをクリックしたときに、親ラッパーdivの隣接するすべてのチェックボックスをオフにします。基本的に、常にラッパーごとに1つのSomeCheckboxClassのみを選択する必要があります。今のところ、私はこれを書いた：

$('#SomeID').on({

   change: function () {

        if ($(this).attr('checked') === 'checked') {

        var TheIndex = $(this).index();

        $(this).parent().find('.SomeCheckboxClass').each(function () {

            if ($(this).index() !== TheIndex) {
                $(this).attr('checked', false);
            }
        });
      }
   }
}, '.SomeCheckboxClass');

それを行う簡単な方法はありますか？しばらく時間をかけてそれを行った後、もっと簡単な方法が必要だと思います。HTMLは実行時に生成されることに注意してください。より簡単/より良い/より速いかどうか教えてください。

ありがとう。

4

8 に答える 8

4

あなたはsiblings（）を使うことができます：

var $this = $(this);
if ($this.is(":checked")) {
    $this.siblings().prop("checked", false);
}
于 2012-06-06T15:20:14.643 に答える
3

カウントは必要ありません：

​$(":checkbox").on("change", function(){
    this.checked && $(this).siblings().prop("checked", false); 
});​​​​​​​​​​​​​​​​​​​​​​

フィドル： http： //jsfiddle.net/jonathansampson/82QcL/2/

于 2012-06-06T15:20:38.190 に答える
2

質問のタイトルで尋ねられるように、以下は選択されたチェックボックスの数を示します。

$("#SomeID .Wrapper input.SomeCheckboxClass:checked").length

http://jsfiddle.net/d9KcH/

ただし、@ dunsmorebが示唆しているように、この種の機能を取得するには、ラジオボタンリストを使用する必要があります。

于 2012-06-06T15:19:26.660 に答える
1

ラジオボタンの機能を再現しようとしているようです。ラジオボタンでは、一度に1つの値しかチェックできません。これが例です。

<input type="radio" name="group1" value="Hello">
<input type="radio" name="group1" value="Hey">
<input type="radio" name="group1" value="Yo">

名前で指定されているボタンは、グループごとに1つだけ選択できます。

注：チェックボックスのようなラジオボタンが必要な場合は、この回答が役立ちます。

于 2012-06-06T15:19:46.270 に答える
1

ここに簡単な試みがあります：

if($(this).is(':checked')) {
  $(this).parent().find('.SomeCheckboxClass').not(this).attr('checked', false);
}

あなたはそれを少し微調整する必要があるかもしれません。

于 2012-06-06T15:20:58.643 に答える
1 
$('#SomeID').on({
   change: function() {
      if(this.checked){
         $(this).siblings(':checkbox').prop('checked', false);
      }
  }
}, '.SomeCheckboxClass');

デモ1

ただし、すべてのチェックボックスをオフにしたい場合は、

$('#SomeID').on({
   change: function() {
       $('.SomeCheckboxClass:checkbox').not(this).prop('checked', false);
  }
}, '.SomeCheckboxClass');

デモ2

于 2012-06-06T15:21:00.083 に答える
1

チェックボックスがチェックされているかどうかをチェックする行為から選択を分離するのが好きです。私が思うよりよく読む：

$("input[type=checkbox]").is(":checked").length;
于 2012-06-06T15:21:32.847 に答える
1

以下のようにしてみてください、

$('#SomeID').on({
   change: function () {
      if (this.checked) {
        $(this)              
          .siblings('.SomeCheckboxClass')
          .prop('checked', false);
      }
   }
}, '.SomeCheckboxClass');

デモ：http： //jsfiddle.net/82QcL/3/

于 2012-06-06T15:22:24.150 に答える