1

[すべて選択]チェックボックスに続いて、データベースからの各レコードに対応する個々のチェックボックスがあります。ユーザーが[すべて選択]をオンにすると、すべてのチェックボックスが選択され、その逆になるようにJavaScript関数を実装するにはどうすればよいですか。

4

4 に答える 4

1

最初にすべて選択チェックボックスにIDを与え、「selectall」と言って、他のすべてのチェックボックスにallcheckとしてクラスを与え、このコードを使用してみてください。

  $("#selectall").click(function() {
    if (!$(this).is(':checked'))
    {
        $('.allcheck').each(function(){
            $(this).prop("checked", false);
        });
    }
    else
    {

        $('.allcheck').each(function(){
            $(this).prop("checked", true);
        });
    }


});

ユーザーがボックスのチェックを外すと、すべてがチェックされていないはずです。これも期待される機能だと思います

注：-jqueryを使用していると仮定して、この回答を提供しました

于 2012-09-12T05:27:41.790 に答える
1

これを試して：

function checkAll(id) {
    var checkboxCollection = document.getElementById('<%= chkint.ClientID %>').getElementsByTagName('input');
    for (var i = 0; i < checkboxCollection.length; i++) {
        if (checkboxCollection[i].type.toString().toLowerCase() == "checkbox") {
            checkboxCollection[i].checked = id.checked;
        }
    }
}

function select() {
    var count = 0;
    var chkSelectAll = document.getElementById('<%= selectall.ClientID %>');
    var chkList = document.getElementById('<%= chkint.ClientID %>').getElementsByTagName("input");
    for (var i = 0; i < chkList.length; i++) {
        if (chkList[i].checked == true) {
            count++;
        }
    }
    if (count == chkList.length)
        chkSelectAll.checked = true;
    else 
        chkSelectAll.checked = false;        
}

このコードでchkintは、 は Checkboxlist の ID でありselectall、 は selectall チェックボックスの ID です。

于 2012-09-12T05:31:35.970 に答える
0

Aravind と同様に、jQuery を使用すると、コンテナー内のすべてのチェックボックスをグループ化して ID を与え、SelectAll チェックボックスに ID を与えることができます。そのコードが簡単になった後、フィドルについてはこちらも参照してください：

$("#selectall").click(function() {
    if ($(this).is(':checked'))
        $("#selectallcontainer :checkbox").not(this).attr('checked', true);
    else
        $("#selectallcontainer :checkbox").not(this).attr('checked', false);
});​
于 2012-09-12T08:02:16.203 に答える
0

純粋な JavaScript ソリューションは次のとおりです。

ここでjsFiddle。

関数を「すべて選択」チェックボックスの onClick イベントにアタッチし、残りのオプションを次のように div でラップするだけです。

<script>
    function checkAll() {
        var checkbox_options = document.getElementById("checkbox_options");
        var checkbox_all = document.getElementById("checkbox_all");

        var checkboxes = checkbox_options.getElementsByTagName("input");        
        for (i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = checkbox_all.checked;
        }
    }
</script>

<label><input id="checkbox_all" type="checkbox" onclick="checkAll()" />Select All</label><br />
<div id="checkbox_options">
    <label><input type="checkbox" />CheckBox1</label><br />
    <label><input type="checkbox" />CheckBox2</label><br />
    <label><input type="checkbox" />CheckBox3</label><br />
</div>
于 2012-09-12T08:54:32.380 に答える