48

私は次のhtmlコードを持っています：

    <input type="checkbox" id="ckbCheckAll" />
    <p id="checkBoxes">
        <input type="checkbox" class="checkBoxClass" id="Checkbox1" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox2" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox3" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox4" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox5" />
        <br />
    </p>

ユーザーがチェックするときはckbCheckAll、すべてのチェックボックスをオンにする必要があります。また、次のjqueryコードがあります。

    $(document).ready(function () {
        $("#ckbCheckAll").click(function () {
            $(".checkBoxClass").attr('checked', this.checked);
        });
    });

ブラウザに自分のページを表示すると、次の結果が得られます。最初のクリックでckbCheckAllすべてのチェックボックスがオンになっています（これは正しいです）。2回目のクリックでは、ckbCheckAllすべてのチェックボックスがオフになっています（これは正しいです）。しかし、3回目の試行では、何も起こりませんでした。また、4回目の試行でも何も起こりませんでした。

問題はどこだ？

4

16 に答える 16

126

プロップを使用する

$(".checkBoxClass").prop('checked', true);

またはチェックを外す：

$(".checkBoxClass").prop('checked', false);

http://jsfiddle.net/sVQwA/

$("#ckbCheckAll").click(function () {
    $(".checkBoxClass").prop('checked', $(this).prop('checked'));
});

更新されたJSFiddleリンク：http ：//jsfiddle.net/sVQwA/1/

于 2013-02-08T17:50:49.430 に答える
8

以下のコードを使用してください。

        $('#globalCheckbox').click(function(){
            if($(this).prop("checked")) {
                $(".checkBox").prop("checked", true);
            } else {
                $(".checkBox").prop("checked", false);
            }                
        });


        $('.checkBox').click(function(){
            if($(".checkBox").length == $(".checkBox:checked").length) { 
                 //if the length is same then untick 
                $("#globalCheckbox").prop("checked", false);
            }else {
                //vise versa
                $("#globalCheckbox").prop("checked", true);            
            }
        });
于 2013-12-13T11:08:38.347 に答える
8

これを行う簡単な方法は次のとおりです。

HTML：

<input type="checkbox" id="selectall" class="css-checkbox " name="selectall"/>Selectall<br>
<input type="checkbox" class="checkboxall" value="checkbox1"/>checkbox1<br>
<input type="checkbox" class="checkboxall" value="checkbox2"/>checkbox2<br>
<input type="checkbox" class="checkboxall" value="checkbox3"/>checkbox3<br>

jquery：

$(document).ready(function(){
$("#selectall").click(function(){
        if(this.checked){
            $('.checkboxall').each(function(){
                $(".checkboxall").prop('checked', true);
            })
        }else{
            $('.checkboxall').each(function(){
                $(".checkboxall").prop('checked', false);
            })
        }
    });
});
于 2014-08-06T11:35:35.957 に答える
3

次の簡単なコードを試してください。

$('input[type=checkbox]').each(function() { this.checked = true; });

出典：jQueryまたは純粋なJSを使用してすべてのチェックボックスをリセットするにはどうすればよいですか？

于 2018-01-10T16:34:36.063 に答える
1

これを使って

if (this.checked)
   $(".checkBoxClass").attr('checked', "checked");
else
   $(".checkBoxClass").removeAttr('checked');

また、 http：//api.jquery.com/prop/propを確認して使用することもできます

于 2013-02-08T17:49:43.160 に答える
1

私はこの質問に対する多くの答えを見てきましたが、いくつかの答えは長く、いくつかの答えは少し間違っていることがわかりました。上記のIDとクラスを使用して独自のコードを作成しました。

$('#ckbCheckAll').click(function(){
        if($(this).prop("checked")) {
            $(".checkBoxClass").prop("checked", true);
        } else {
            $(".checkBoxClass").prop("checked", false);
        }                
    });


    $('.checkBoxClass').click(function(){
        if($(".checkBoxClass").length == $(".checkBoxClass:checked").length) { 
            $("#ckbCheckAll").prop("checked", true);
        }else {
            $("#ckbCheckAll").prop("checked", false);            
        }
    });

上記のコードでは、ユーザーが[すべて選択]チェックボックスをクリックするとすべてのチェックボックスが選択され、その逆も同様です。ユーザーがチェックボックスを1つずつ選択し、すべてのチェックボックスを選択すると、チェックボックスの数に応じてチェックボックスがオンまたはオフになります。 。

于 2021-02-07T13:17:26.587 に答える
0

代わりにprop（）を使用してください-

$(document).ready(function () {
        $("#ckbCheckAll").click(function () {
            $(".checkBoxClass").each(function(){
                if($(this).prop("checked", true)) {
                    $(this).prop("checked", false);
                } else {
                    $(this).prop("checked", true);
                }                
            });
        });
    });

しかし、私は@dmkのはるかにコンパクトな答えが好きで、それを+1しました

于 2013-02-08T17:55:45.050 に答える
0 
$(document).ready(function() {
    $('#ckbCheckAll').click(function() {
        $('.checkBoxClass').each(function() {
            $(this).attr('checked',!$(this).attr('checked'));
        });
    });
});

また

$(function () {
    $('#ckbCheckAll').toggle(
        function() {
            $('.checkBoxClass').prop('checked', true);
        },
        function() {
            $('.checkBoxClass').prop('checked', false);
        }
    );
});
于 2013-02-08T17:55:57.413 に答える
0

これを試して

$(document).ready(function () {
    $("#ckbCheckAll").click(function () {
        $("#checkBoxes input").prop('checked', $(this).prop('checked'));
    });
});

それはそれをする必要があります:)

于 2013-02-08T18:03:01.760 に答える
0 
$(document).ready(function(){
$('#ckbCheckAll').click(function(event) { 
            if($(this).is(":checked")) {
                $('.checkBoxClass').each(function(){
                    $(this).prop("checked",true);
                });
            }
            else{
                $('.checkBoxClass').each(function(){
                    $(this).prop("checked",false);
                });
            }   
    }); 
    });
于 2016-02-01T07:24:02.637 に答える
0 
$(document).ready(function () {
    $(".class").on('click', function () {
        $(".checkbox).prop('checked', true);
    });
});
于 2017-02-09T08:28:11.603 に答える
0

次のチェックボックスを設定します

 <input type="checkbox" name="vehicle" value="select All" id="chk_selall">Select ALL<br>
        <input type="checkbox" name="vehicle" value="Bike" id="chk_byk">bike<br>
        <input type="checkbox" name="vehicle" value="Car" id="chk_car">car 
        <input type="checkbox" name="vehicle" value="Bike" id="chk_bus">Bus<br>
        <input type="checkbox" name="vehicle" value="scooty" id="chk_scooty">scooty

selectallチェックボックスがクリックされたときにすべてを選択してすべてを選択解除する簡単なコードは次のとおりです

<script type="text/javascript">
        $(document).ready(function () {
            $("#chk_selall").on("click", function () {

                $("#chk_byk").prop("checked", true); 
                $("#chk_car").prop("checked", true); 
                $("#chk_bus").prop("checked", true); 
                $("#chk_scooty").prop("checked", true); 


            })

            $("#chk_selall").on("click", function () {

                if (!$(this).prop("checked"))
                {
                    $("#chk_byk").prop("checked", false);
                    $("#chk_car").prop("checked", false);
                    $("#chk_bus").prop("checked", false);
                    $("#chk_scooty").prop("checked", false);             

                }
            });


        });
    </script>
于 2018-01-03T06:03:18.837 に答える
0

checkallはallチェックボックスのIDであり、cb-childは、checkallクリックイベントに応じてチェックおよびオフになる各チェックボックスの名前です。 

$("#checkall").click(function () {
                        if(this.checked){
                            $("input[name='cb-child']").each(function (i, el) {
                                el.setAttribute("checked", "checked");
                                el.checked = true;
                                el.parentElement.className = "checked";

                            });
                        }else{
                            $("input[name='cb-child']").each(function (i, el) {
                                el.removeAttribute("checked");
                                el.parentElement.className = "";
                            });
                        }
                    });
于 2018-09-26T10:05:00.577 に答える
0 
 jQuery( function($){
    // add multiple select / deselect functionality
    $("#contact_select_all").click(function () {

        if($("#contact_select_all").is(":checked")){
            $('.noborder').prop('checked',true);
        }else
            $('.noborder').prop('checked',false);
    });

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

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

    });

});
于 2018-12-24T05:50:19.743 に答える
0

手遅れだとは思いますが、今後の開発者向けに投稿します。

[すべて選択]チェックボックスの場合、3つの条件をチェックする必要があります。1。[すべて選択]チェックボックスをクリックすると、すべてのチェックボックスが選択されます。チェックボックスすべて選択チェックボックスも変更する必要があります。

これらの3つのことで、良い結果が得られます。これについては、このリンクにアクセスできますhttps://qawall.in/2020/05/30/select-all-or-deselect-all-checkbox-using-jquery/ Iここから私の解決策を得ました、彼らは例で解決策を提供しました。

<table>
<tr>
    <th><input type="checkbox" id="select_all"/> Select all</th>
</tr>
<tr>
    <td><input type="checkbox" class="check" value="1"/> Check 1</td>
    <td><input type="checkbox" class="check" value="2"/> Check 2</td>
    <td><input type="checkbox" class="check" value="3"/> Check 3</td>
    <td><input type="checkbox" class="check" value="4"/> Check 4</td>
    <td><input type="checkbox" class="check" value="5"/> Check 5</td>
</tr>


<script type="text/javascript">
$(document).ready(function(){
$('#select_all').on('click',function(){
    if(this.checked){
        $('.check').each(function(){
            this.checked = true;
        });
    }else{
         $('.check').each(function(){
            this.checked = false;
        });
    }
});

$('.check').on('click',function(){
    if($('.check:checked').length == $('.check').length){
        $('#select_all').prop('checked',true);
    }else{
        $('#select_all').prop('checked',false);
    }
});

}）;

これが誰かに役立つことを願っています...:)

于 2020-05-31T17:53:56.110 に答える
0

jquery-2.1.0.min.jsファイルを追加します

<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>

以下のコードを書いてください。

<script>
$(document).ready(function () {   
    $("#checkAll").change(function() {
        var checked = $(this).is(':checked'); // Get Checkbox state
        if (this.checked) //If true then checked all checkboxes
           $(".classofyourallcheckbox").prop('checked', true);
        else
           $(".classofyourallcheckbox").prop('checked', false); //or uncheck all textboxes 
    }); 
});
</script>
于 2020-11-07T04:49:40.133 に答える