19

私はhtmlアイテムを持っています.4つの例:

<div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
    <div><input type="checkbox" class="foo"> Checkbox</div>
</div>

そして今、次のことが必要です。チェックボックスをクリックすると、チェックボックスがオンになり、他のチェックボックスがオフになります。どうすればいいですか？

4

4 に答える 4

36

ボタンを使用radioして、名前属性でグループ化できます。あなたがそれをしなければならないなら、あなたcheckboxesはこのようにすることができます、

ライブデモ

$('.foo').click(function(){     
      $('.foo').attr('checked', false);
      $(this).attr('checked', true);          
});

静的な親でイベントを委任できる動的に生成されたhtml の場合、静的な親がわからないドキュメントを使用できます。

$(document).on('click','.foo', function(){     
      $('.foo').attr('checked', false);
      $(this).attr('checked', true);          
});

既知の場合、ドキュメントは静的な親に置き換えることができます。たとえば、div に動的に生成された ID が含まれているparentdiv場合は、

`$('#parentdiv').on('click','.foo', function(){`

編集

propattrプロパティchecked、selected、またはドキュメントの代わりに使用disabledします。

jQuery 1.6 以降、.attr() メソッドは、設定されていない属性に対して undefined を返します。フォーム要素のチェック状態、選択状態、無効状態などの DOM プロパティを取得および変更するには、.prop() メソッドを使用します。

于 2012-12-06T07:50:48.043 に答える