18

私はjquery-1.9.1.jsを使用しています。私のhtmlページでは、初めてうまく機能します。

http://jsfiddle.net/pzCcE/1/のように

誰かが私がそれを改善するのを手伝ってくれる？

<table id="tab1">
    <input type="checkbox" name="checkAll" id="checkAll">全選
    <input type="checkbox" name="book" id="book" value="book1">book1
    <input type="checkbox" name="book" id="book" value="book2">book2
    <input type="checkbox" name="book" id="book" value="book3">book3
    <input type="checkbox" name="book" id="book" value="book4">book4
    <input type="checkbox" name="book" id="book" value="book5">book5</table>

$(function () {
    $("#tab1 #checkAll").click(function () {
        if ($("#tab1 #checkAll").is(':checked')) {
            $("#tab1 input[type=checkbox]").each(function () {
                $(this).attr("checked", true);
            });

        } else {
            $("#tab1 input[type=checkbox]").each(function () {
                $(this).attr("checked", false);
            });
        }
    });
});
4

10 に答える 10

40

変化する

$(this).attr("checked", true);

に

$(this).prop("checked", true);

jsFiddleの例

私は実際にこれに似た別の質問に答えました。.prop （）ドキュメントによると：

.prop（）メソッドは、プロパティの値を設定するための便利な方法です。特に、複数のプロパティを設定する場合、関数から返される値を使用する場合、または複数の要素に一度に値を設定する場合に便利です。これは、selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked、またはdefaultSelectedを設定するときに使用する必要があります。jQuery 1.6以降、これらのプロパティは.attr（）メソッドで設定できなくなりました。それらには対応する属性がなく、単なるプロパティです。

プロパティは通常、シリアル化されたHTML属性を変更せずに、DOM要素の動的な状態に影響を与えます。例には、入力要素のvalueプロパティ、入力とボタンのdisabledプロパティ、またはチェックボックスのcheckedプロパティが含まれます。.attr（）メソッドの代わりに、.prop（）メソッドを使用して無効に設定し、チェックする必要があります。値の取得と設定には、.val（）メソッドを使用する必要があります。

于 2013-03-19T16:12:41.663 に答える
10

同じ名前のクラスを使用する必要があります。IDは一意である必要があります。

<input type="checkbox" name="checkAll" id="checkAll">全選
<input type="checkbox" name="book" class="book" value="book1">book1
<input type="checkbox" name="book" class="book" value="book2">book2
<input type="checkbox" name="book" class="book" value="book3">book3
<input type="checkbox" name="book" class="book" value="book4">book4
<input type="checkbox" name="book" class="book" value="book5">book5</table>

$(function () {
    $("#checkAll").click(function () {
        if ($("#checkAll").is(':checked')) {
            $(".book").prop("checked", true);
        } else {
            $(".book").prop("checked", false);
        }
    });
});
于 2013-03-19T16:15:27.417 に答える
3

OPではチェックボックスをオンにする必要があるため、別のチェックボックスに基づいてすべてのチェックボックスをオフにしますid=全選。

@ j08691が上記で提供されている解決策は優れていますが、1つ欠けていid=全選ます。つまり、リスト内の他のチェックボックスがオフになっても、ソリューションはチェックボックスをオフにしません。

そこで、チェックボックスに基づいてすべてのチェックボックスをオン/オフにし、id=全選他のチェックボックスがオフになっている場合はチェックボックスがオフになるソリューションを提案しますid=全選。また、ユーザーが他のすべてのチェックボックスを手動でクリックした場合id=全選は、関係を反映するためにチェックボックスもオンにする必要があります。

DOMのルールに反する複数のチェックボックスに同じIDを使用するOP。要素IDは、ドキュメント全体で一意である必要があります。

したがって、次のコードは、この種のシナリオのすべての側面をカバーしています。

HTML

<table>
    <tr>
        <td>
        <input type="checkbox" name="checkAll" id="checkAll">全選 (ALL)
        <input type="checkbox" name="book" id="book_1" value="book1">book1
        <input type="checkbox" name="book" id="book_2" value="book2">book2
        <input type="checkbox" name="book" id="book_3" value="book3">book3
        <input type="checkbox" name="book" id="book_4" value="book4">book4
        <input type="checkbox" name="book" id="book_5" value="book5">book5
        </td>
     </tr>
</table>

JQuery

$(document).ready(function() {

    $('#checkAll').click(function () {
        $('input:checkbox').not(this).prop('checked', this.checked);
    });

    $("[id*=book_]").change(function () {
        if ($('input[id*=book_][type=checkbox]:checked').length == $('input[id*=book_][type=checkbox]').length) {
            $('#checkAll').prop('checked', true);
        } else {
            $('#checkAll').prop('checked', false);
        }
    });

});

属性セレクターの説明[name*= "value"]

指定された部分文字列を含む値を持つ指定された属性を持つ要素を選択します。

したがって$('#checkAll')、親のチェックボックスのみを返します。このチェックボックスで、すべてのチェックボックスをオン/オフにします。

そして$('[id$=book_]')、parent（全選択）チェックボックスを除くすべてのチェックボックスを返します。次に、親のチェックボックスに基づいて、他のすべてのチェックボックスをオン/オフにします。

親（全選）チェックボックス以外のチェックボックスの長さもチェックします。他のすべてのチェックボックスがチェックされている場合は、親（全選択）チェックボックスをチェックします。したがって、これはすべての可能な状態をクロスチェックする方法であり、シナリオを見逃すことはありません。

ここでJSFiddleを動作させるデモ。

于 2015-02-20T14:39:55.670 に答える
2

最速の方法。いくつかの行を保存します

   $(".ulPymnt input[type=checkbox]").each(function(){                
       $(this).prop("checked", !$(this).prop("checked"))                
   })
于 2016-07-30T08:11:00.100 に答える
1

@j08691の回答を簡略化しました

$("#checkAll").click(function() {
      var allChecked = $(this);
      $("#tab1 input[type=checkbox]").each(function() {
        $(this).prop("checked", allChecked.is(':checked'));
      })
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab1">
  <tr>
    <td>
      <input type="checkbox" name="checkAll" id="checkAll">Select all
      <input type="checkbox" name="book" id="book" value="book1">book1
      <input type="checkbox" name="book" id="book" value="book2">book2
      <input type="checkbox" name="book" id="book" value="book3">book3
    </td>
  </tr>
</table>

于 2015-06-10T08:24:49.333 に答える
0

j08691の答えで次のことも調べてください。

IDは定義上DOM内で一意である必要があるため、＃id#idのようなセレクターを作成することはまったく意味がありません。

<input type="checkbox" name="checkAll" class="checkAll">

$("#tab1 .checkAll").click(function () {
于 2013-03-19T16:16:31.913 に答える
0

これも追加します....FOR..... 1つのチェックボックス（id：book）が選択されていない場合は、メインのチェックボックス（id：checkAll）が選択解除されることを意味します

$("#tab1 #book").click(function () {
  if($('#book').is(':checked'))
  {
    $("#checkAll").prop("checked", false);        
  }
});
于 2014-07-24T08:05:13.087 に答える
0 
$("input[name='select_all_photos']").click(function () {
        var checked = $(this).is(':checked');
        $("input[name^='delete_']").each(function () {
            $(this).prop("checked", checked);
        });
    });

わざわざifステートメントを実行しないでください。

于 2014-08-19T05:11:28.570 に答える
0 
`change click to ch  $("#checkAll").click(); to $("#checkAll").change();

> Blockquote

$(function () {
 $("#checkAll").change(function () {
  if ($("#checkAll").is(':checked')) {
   $(".book").prop("checked", true);
   } else {
   $(".book").prop("checked", false);
  }
 });
});`
于 2017-12-02T03:20:26.430 に答える
0

これはすべてのチェックボックスリストで機能します。それを制御する入力に「check-all」を追加するだけです。これは同じ名前である必要があります

$(function() {
  $('.check-all').each(function(){
    var checkListName = $(this).attr('name');
    $(this).change(function(){
      //change all checkbox of the list checked status
      $('input[name="'+checkListName+'"]').prop('checked', $(this).prop('checked')); 
    });
    $('input[name="'+checkListName+'"]').change(function(){
      //change .check-all checkbox depending of the list checked status
      $('input[name="'+checkListName+'"].check-all').prop('checked', ($('input[name="'+checkListName+'"]:checked').not('.check-all').length == $('input[name="'+checkListName+'"]').not('.check-all').length));
    });
  });
});
于 2018-06-26T12:53:17.840 に答える