13

「すべて選択」チェックボックスをクリックすると、ページ上のすべてのチェックボックスを選択しようとしています。以下のリンクでわかるように、これには jquery を使用しています。

http://jsfiddle.net/priyam/K9P8A/

すべてのチェックボックスを選択および選択解除するコードは次のとおりです。

function selectAll() {
    $('.selectedId').attr('checked', isChecked('selectall'));
}

function isChecked(checkboxId) {
    var id = '#' + checkboxId;
    return $(id).is(":checked");
}

1日立ち往生した後でも、なぜ機能しないのかまだわかりません。助けてください

4

11 に答える 11

7

これは、メソッドselectAllがグローバル スコープで使用できないためです。

左パネルの 2 番目のドロップダウンで、正常に動作することをFrameworks and Extensions選択しますno -wrap head/body。

デフォルトonloadで選択されている理由が選択されており、オンロードが選択されている場合、入力されたすべてのスクリプトは、以下に示すように無名関数内にラップされます。selectAll関数を無名関数内のローカル メソッドにするため、グローバル スコープを使用する onclick イベント ハンドラはメソッドにアクセスできず、Uncaught ReferenceError: selectAll is not definedエラーが発生します。

$(window).load(function(){
    //Entered script
});

デモ:フィドル

更新 しかし、次のように単純化できます

$(function(){
    $('#selectall').click(function(i, v){
        $('.selectedId').prop('checked', this.checked);
    });

    var checkCount = $('.selectedId').length;
    $('.selectedId').click(function(i, v){
        $('#selectall').prop('checked',$('.selectedId:checked').length  == checkCount)
    });
});

このデモonclickに示すように、入力要素からすべてのハンドラーを削除します

于 2013-04-08T13:00:25.437 に答える
4 
$(document).ready(function () {
    $('#selectall').click(function () {
        $('.selectedId').prop('checked', $(this).is(":checked"));
    });
});

more Optimized
于 2013-10-01T10:20:36.240 に答える
0

より具体的な解決策:

$(document).ready(function(){
  $('#checkAll').on('click', function ( e ) {
    $('input[name="chck_box[]"]').prop('checked', $(this).is(':checked'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th><input type="checkbox" id="checkAll"></th>
    <th>Name</th>
    <th>Last</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="1"></td>
      <td>Joe</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="2"></td>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="3"></td>
      <td>Bill</td>
      <td>White</td>
    </tr>
  </tbody>
</table>

于 2016-09-16T22:34:02.197 に答える
0

$(関数(){

// add multiple select / deselect functionality
$("#selectall").click(function () {
      $('.case').attr('checked', this.checked);
});

// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){

    if($(".case").length == $(".case:checked").length) {
        $("#selectall").attr("checked", "checked");
    } else {
        $("#selectall").removeAttr("checked");
    }

});

});

于 2013-09-03T09:32:45.207 に答える
0

親のチェックボックスには mainselect のクラスがあり、すべての子には childselect のクラスがあると仮定します

次に、親を選択するとすべてのチェックボックスが選択され、その逆も同様です。

$('#mainselect').live('change',function(){
if($(this).attr('checked') == 'checked') {
    $('.childselect').attr('checked','checked');
} else {
    $('.childselect').removeAttr('checked');
}
});
于 2013-08-05T11:24:15.173 に答える
0

すべて選択チェックボックスのクリックイベントにハンドル関数を追加するだけです。

$('#chk-all-items').click(selectAll);

そして、この関数は、すべてを選択またはすべて選択解除するのに十分なはずです。

selectAll = function (event) {
        var self = this;
        $('.template-item-select').each(function () {
            this.checked = self.checked;
        });
    }
于 2015-06-22T22:18:10.343 に答える
0

チェックボックスにクリックイベントに関連付けられた特定の処理がある場合、@letiagoalves ソリューションの小さな機能強化。OPから求められたわけではありませんが、過去にやらなければならなかったことです。基本的に、各依存チェックボックスのcheckedプロパティを直接設定する代わりに、各依存チェックボックスのチェック状態をselectallチェックボックスと比較し、反対の状態にあるものでクリックイベントをトリガーします。

$('#selectall').click(function () {
    var parentState = $(this).prop('checked');
    $('.selectedId').each(function() {
        if ($(this).prop('checked') !== parentState) {
            $(this).trigger("click");
        }
});
});

デモ: https://jsfiddle.net/jajntuqb/2/

于 2015-03-03T18:35:31.550 に答える