1

「すべて選択」チェックボックスをクリックしたら、すべてのチェックボックスを選択したい。これがコードです

<div class="fp">
  <div class="fpanel">
    <div class="fpblockscontainer"> 
      <span class="fpblockslabel">Merchants</span>    
      <div class="fpblocks">
        <label class="checkbox">
          <input class=".select-all2" type="checkbox">Select All</label>
        <label class="checkbox">
          <input type="checkbox">Apple</label>
        <label class="checkbox">
          <input type="checkbox">orange</label>
        <label class="checkbox">
          <input type="checkbox">potato</label>
        <label class="checkbox">
          <input type="checkbox">Williams-Sonoma</label>

      </div>
    </div>

ここでは、「select.all2」チェックボックスが選択されたら、すべてのチェックボックスを選択する必要があります。以下の jquery コードが機能していません。どこが間違っていますか？

$(".select-all2").on("click", function () {
  if ($(this).is(':checked')) {
    $(this).closest("div.fp").find(':checkbox').each(function () {
      $(this).attr('checked', 'checked');
    });
  } else {
    $(this).closest("div.fp").find(':checkbox').each(function () {
      $(this).removeAttr('checked');
    });
  }
});
4

4 に答える 4

5

入力からドットを削除するだけで、正常に動作するはずです

<input class=".select-all2" type="checkbox" >

に

<input class="select-all2" type="checkbox" >

ここを参照してください: jsFiddle デモ

于 2013-05-07T09:30:24.690 に答える
4

.クラスから削除

 <input class="select-all2" type="checkbox" >
       //------^----here

attr() の代わりに prop() を使用する

 $(this).prop('checked', true); //to check the checkbox

 $(this).prop('checked', false); //to uncheck the checkbox

each() ループは必要ありません

これを試して

 $(".select-all2").on("click", function() {
    if ($(this).is(':checked')) {
        $(this).closest("div.fpblocks").find(":checkbox").prop('checked',true);

    } else {
       $(this).closest("div.fpblocks").find(":checkbox").prop('checked',false);
    }
});

ここでフィドル

于 2013-05-07T09:29:50.830 に答える
4

.マークアップのクラス名に が含まれているため、クリックは発生しません。

<input class=".select-all2" type="checkbox" >

次のようにする必要があります。

<input class="select-all2" type="checkbox" >

スクリプトをより簡潔にすることもできます。

$(".select-all2").click(function(){
    $("input[type='checkbox']").prop("checked", $(this).is(":checked"));
});

作業例 http://jsfiddle.net/uY8yu/

于 2013-05-07T09:30:05.257 に答える
0

選択/選択解除のためにこれを試してください。これによりselect-all2、個々のチェックボックスがオン/オフになったときの状態も変わります。 

var $ch = $(".select-all2").change(function() {
    $all.prop('checked', $ch.filter(':checked').length == $ch.length);
}),
$all = $('.checkbox input[type=checkbox]').click(function () {
  $ch.prop('checked', this.checked);
});

デモを見る

于 2013-05-07T09:29:59.780 に答える