1

私のテーブルは次のようになります：

<table id="tableOne" class="yui">
    <thead>
        <tr>
            <th>
                <div><input type="checkbox" /></div>
            </th>
            <th>
                <div>Name</div>
            </th>
            <th>
                <div>English</div>
            </th>
            <th>
                <div>Spanish</div>
            </th>
            <th>
                <div>Math</div>
            </th>
            <th>
                <div>History</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div><input type="checkbox" /></div>
            </td>
            <td>
                <div>Bob Smith</div>
            </td>
            <td>
                <div>80</div>
            </td>
            <td>
                <div>70</div>
            </td>
            <td>
                <div><input type="checkbox" /></div>
            </td>
            <td>
                <div><input type="checkbox" /></div>
            </td>
        </tr>
        <tr>
            <td>
                <div><input type="checkbox" /></div>
            </td>
            <td>
                <div>George Jones</div>
            </td>
            <td>
                <div>90</div>
            </td>
            <td>88</div>
            </td>
            <td>
                <div><input type="checkbox" /></div>
            </td>
            <td>
                <div><input type="checkbox" /></div>
            </td>
        </tr>
    </tbody>
</table>

次のJavaScriptを使用して、ヘッダーのチェックボックスをクリックしたときに最初の列のすべてのチェックボックスをオン/オフにします。

$(document).ready(function() {
    $("#tableOne thead tr th:first input:checkbox").click(function() {
        var checkedStatus = this.checked;
        $("#tableOne tbody tr td:first-child input:checkbox").each(function() {
            this.checked = checkedStatus;
        });
    });
});

動作していません。ヘッダーのチェックボックスをクリックすると、最初の列のすべてのチェックボックスが選択されません。私はここで何か間違ったことをしていることを知っています。<tr>タグが入っているので、選択中にこれをどこか<div>に提供する必要があります。しかし、Javascriptの<div>どこにこれを入れるべきか正確にはわかりません。divいくつかの組み合わせを試しましたが、うまくいかないようです。

助けてください。

編集：HTMLページに複数のテーブルがあり、このテーブルのみに影響を与えたいです。また、最初の列のチェックボックスのみをチェックする必要があります。

もう一度編集：申し訳ありませんが、私のテーブルは上記の方法でレンダリングされています。テーブルのhtmlを変更しました。

4

4 に答える 4

1

HTML コードが壊れているため、Internet Explorer などの一部のブラウザーでコードが機能しなくなります。表のセルを div タグで囲むことはできません。

ブラウザーが異なれば、壊れたコードの処理も異なります。たとえば、Firefox は div タグをテーブルの外に移動するため、コードが壊れることはありません。Internet Explorer はテーブル セルを div タグの外に移動しますが、テーブル セルの前のテーブル行内には壊れた名前のないタグが残っているため:first-child、テーブル セルがテーブル行の最初の子ではないため、セレクターは機能しません。

div タグを削除すると、正常に動作します: http://jsfiddle.net/Guffa/jKxNF/1/

IE9、Firefox、Chrome、Safari、Opera でテスト済み

于 2012-06-05T07:27:05.583 に答える
0

まず第一に、TR タグが DIV 内にあるため、HTML は有効ではありませんが、jQuery では問題になりません。あなたのコードにそれほど問題はありませんが、間違いなく単純化できます。次のアプローチが機能するはずです。

$("#tableOne thead input:checkbox").click(function() {
    $("#tableOne tbody input:checkbox").prop('checked', $(this).is(':checked'));
});

各子ノードを指定する必要はないことに注意してください。ネストされた子タグにあるかどうかに関係なく、$('#tableOne thead :checkbox')内のすべてのチェックボックスが検索されます。theadただし、$('#tableOne thead > :checkbox')チェックボックスがの直接の子であることが義務付けられますthead。

于 2012-06-05T07:19:50.473 に答える
0

// 最初はすべてのチェックボックスが空です 

var checked = false;
$(element).click(function(){
      if (checked){
          $("#tableOne").find("input[type=checkbox]").removeAttr("checked");
          checked = false;
      }
      else{
          $("#formId").find("input[type=checkbox]").setAttr("checked", "checked");
          checked = true;
      }
});
于 2012-06-05T07:21:55.857 に答える
0

これは、chkPresent123などのIDプレフィックスとしてchkを与える最も簡単な方法だと思います

$("#invoiceReceiptTable > tbody > tr").each(function (i, el) {

       $($(this).find("input[id^=chk]")).prop('checked', true);

    }
});

これが、チェックされたすべてのチェックボックスを取得する方法です。チェックされたすべての ID は $IDs になります

$IDs = $("#invoiceReceiptTable input:checkbox:checked").map(function () {
    var id = $(this).attr("id");
    return id;
}).get();
于 2014-02-14T06:32:57.070 に答える