0

HTML：

<table class="responsive" id="products">
    <a href="#" id="checkAllProducts">Do it</a>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</table>

JS：

$(document).ready(function(){
  $('#checkAllProducts').click(function(){
    var checkbox = $('#products input:checkbox');
    checkbox.attr('checked',!checkbox.attr('checked'));
  });
});​

ここでデバッグできます。

私がそうすればコードは機能しますvar checkbox = $('input:checkbox');。問題はセレクターにある可能性があります

このコードは、リンクをクリックした後にすべてのチェックボックスをオンにする必要があります。しかし、それはしません。なんで？

4

5 に答える 5

7

HTML が無効です。input要素内に要素を直接配置することはできませんtable。#productsほとんどの場合、ブラウザーは、次の要素がテーブル タグの後に続く必要がないことを検出すると、テーブル タグを自動的に閉じます。したがって、チェックボックスはセレクターの子として見つかりません。

<div class="responsive" id="products">

トリックを行います。

さらに、「checked」はプロパティであるため、prop() を使用してアクセスする必要があります。

checkbox.prop('checked', !checkbox.prop('checked'));

http://jsfiddle.net/UNqfv/6/

于 2012-08-11T16:05:29.903 に答える
1 
var checkbox = $('#products input:checkbox');

checkboxは単一のチェックボックスではありません.each()。すべてのチェックボックスを操作するには、を呼び出す必要があります。

于 2012-08-11T16:03:49.370 に答える
1

htmlテーブル要素にはtr、tdタグが含まれている必要があります。

<table class="responsive" id="products">
    <tr>
        <td><a href="#" id="checkAllProducts">Do it</a></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
    </tr>
</table>

セレクターコードは似ているはずです

var checkbox = $('#products tr td input:checkbox');

ここでデバッグするため

于 2012-08-11T17:47:04.343 に答える
1

私の知る限り、テーブルが適切にフォーマットされている限り、テーブルには任意のブロック レベルまたはインライン要素を含めることができます。td問題は、テーブルの行と行を定義するために、テーブルに、trおよびたわごとのようなものを持たなければならないことです。

<table class="responsive" id="products">
    <tr>
        <td>
            <a href="#" id="checkAllProducts">Do it</a>
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
        </td>
    </tr>
</table>

それは問題なく動作し、次のことができます。

$(function(){
  $('#checkAllProducts').on('click', function(e){
      e.preventDefault();
      var checkbox = $('#products input[type="checkbox"]');
      checkbox.prop('checked', !checkbox.prop('checked'));
  });
});

フィドル</p>

于 2012-08-11T19:35:01.747 に答える
0

これを使用すると、問題なく動作します。

$(document).ready(function(){
   $('#checkAllProducts').click(function(){
    var checkbox = $('input:checkbox');
    checkbox.attr('checked',!checkbox.attr('checked'));
});

});​

その理由は、「すべてのチェック ボックス」を指定する必要があるためです。現時点では、セレクター「$('#products input:checkbox');」を使用すると、id が「products」のチェック ボックスのみが選択されます。「製品」と呼ばれるすべてのチェックボックスに id 属性がある場合、元のコードは機能します。代わりに、上で示したセレクターは、任意のチェックボックス タイプを選択します。うまくいけば、これは役に立ち、説明は明確です! ハッピーコーディング！

于 2012-08-12T00:07:30.790 に答える