堆棧內存溢出
  簡體   English   中英

jQuery復選框選擇所有不適用於Chrome

[英]jQuery checkbox select all not working on Chrome

 原文  2018-08-16 14:21:55  8   1    javascript/ jquery/ html/ google-chrome

問題描述

下面的代碼適用於 JSFIDDLE，但由於某種原因我無法在 Chrome 上使用它。 我修改了 jsfiddle http://jsfiddle.net/Alfie/V5SSM/2/上的代碼

到下面的代碼。 它在 Jsfiddle 上運行，但不在瀏覽器上運行。 任何幫助表示贊賞。 我缺少一些東西，可能是我必須將 jquery 代碼轉換為 html 兼容格式才能使代碼正常工作。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>New User Tasks</title>
<script>
$(document).ready(function(){
$('#selectAllButton').on('click', function () {
    $('input[type="checkbox"]').prop('checked', true).closest('label').addClass('c_on');
});
$('#selectNoneButton').on('click', function () {
    $('input[type="checkbox"]').prop('checked', false).closest('label').removeClass('c_on');
});

$('.section .section_label input').click(function () {

    var chckClass = "";
    if (!this.checked) {
        chckClass = "";
    } else {
       chckClass = "c_on"
    }
    $(this).closest('.section').find('input[type="checkbox"]').not(this).prop('checked', this.checked).closest('label').removeClass("c_on").addClass(chckClass);
});
$('input[type="checkbox"]').on('click', function () {
     var chckClass = "";
    if (!this.checked) {
        chckClass = "";
    } else {
       chckClass = "c_on"
    }
    $(this).closest('label').removeClass('c_on').addClass(chckClass);
});
});
</script>
</head>
<body>


<div id="docbuilder" class="db form">
    <div class="document">
        <div class="section inline">
            <label class="label_radio lightblue" id="selectAllButton" for="selectAll">
                <input type="radio" name="masscheck" id="selectAll" />Select all</label>
        </div>
        <div class="section inline">
            <label class="label_radio lightblue" id="selectNoneButton" for="selectNone">
                <input type="radio" name="masscheck" id="selectNone" />Select none</label>
        </div>
        <div class="clear"></div>
    </div>
    <div class="document">
        <div class="section">
            <label class="label_check section_label blue" for="docs_1131">
                <input type="checkbox" id="docs_1131" name="docs" value="1131" />Title page</label>
        </div>
    </div>
    <div class="document">
        <div class="section">
            <label class="label_check section_label blue" for="docs_1118">
                <input type="checkbox" id="docs_1118" name="docs" />Section 1</label>
            <blockquote>
                <div class="subsection">
                    <label class="label_check sub_label lightblue">
                        <input type="checkbox"  name="docs" value="1119" />Subsection 1.1</label>
                </div>
                <div class="subsection">
                    <label class="label_check sub_label lightblue" for="docs_1120">
                        <input type="checkbox" id="docs_1120" name="docs" value="1120" />Subsection 1.2</label>
                </div>
                <div class="subsection">
                    <label class="label_check sub_label lightblue" for="docs_1121">
                        <input type="checkbox" id="docs_1121" name="docs" value="1121" />Subsection 1.3</label>
                </div>
                <div class="subsection">
                    <label class="label_check sub_label lightblue" for="docs_1122">
                        <input type="checkbox" id="docs_1122" name="docs" value="1122" />Subsection 1.4</label>
                </div>
            </blockquote>
        </div>
    </div>
    <div class="document">
        <div class="section">
            <label class="label_check section_label blue" for="docs_1123">
                <input type="checkbox" id="docs_1123" name="docs" />Section 2</label>
<table>
<tr><div class="subsection">
                    <label class="label_check sub_label lightblue" for="docs_1124">
                        <input type="checkbox" id="docs_1124" name="docs" value="1124" />Subsection 2.1</label>
                </div></tr>
                <tr><div class="subsection">
                    <label class="label_check sub_label lightblue" for="docs_1124">
                        <input type="checkbox" id="docs_1124" name="docs" value="1125" />Subsection 2.2</label>
                </div></tr>
                <tr></tr><div class="subsection">
                    <label class="label_check sub_label lightblue" for="docs_1126">
                        <input type="checkbox" id="docs_1126" name="docs" value="1126" />Subsection 2.3</label>
                </div><tr>
                <tr><div class="subsection">
                    <label class="label_check sub_label lightblue" for="docs_1127">
                        <input type="checkbox" id="docs_1127" name="docs" value="1127" />Subsection 2.4</label>
                </div></tr>
</table>
        </div>
    </div>
    <button type="submit" class="icon icon-arrow-white">Submit</button>
</div>

</body>
</html>

1 個解決方案

解決方案1
 0 已采納  2018-08-16 14:51:10

我想你忘了包括 jQuery 1.10.1 版本。 我使用了 cdn，它在我的 chrome 最新版本上運行良好。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>New User Tasks</title>
        <!--NOTICE THE CDN FOR JQUERY-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
        <script>
            $(document).ready(function () {
                $('#selectAllButton').on('click', function () {
                    $('input[type="checkbox"]').prop('checked', true).closest('label').addClass('c_on');
                });
                $('#selectNoneButton').on('click', function () {
                    $('input[type="checkbox"]').prop('checked', false).closest('label').removeClass('c_on');
                });

                $('.section .section_label input').click(function () {

                    var chckClass = "";
                    if (!this.checked) {
                        chckClass = "";
                    } else {
                        chckClass = "c_on"
                    }
                    $(this).closest('.section').find('input[type="checkbox"]').not(this).prop('checked', this.checked).closest('label').removeClass("c_on").addClass(chckClass);
                });
                $('input[type="checkbox"]').on('click', function () {
                    var chckClass = "";
                    if (!this.checked) {
                        chckClass = "";
                    } else {
                        chckClass = "c_on"
                    }
                    $(this).closest('label').removeClass('c_on').addClass(chckClass);
                });
            });
        </script>
    </head>
    <body>


        <div id="docbuilder" class="db form">
            <div class="document">
                <div class="section inline">
                    <label class="label_radio lightblue" id="selectAllButton" for="selectAll">
                        <input type="radio" name="masscheck" id="selectAll" />Select all</label>
                </div>
                <div class="section inline">
                    <label class="label_radio lightblue" id="selectNoneButton" for="selectNone">
                        <input type="radio" name="masscheck" id="selectNone" />Select none</label>
                </div>
                <div class="clear"></div>
            </div>
            <div class="document">
                <div class="section">
                    <label class="label_check section_label blue" for="docs_1131">
                        <input type="checkbox" id="docs_1131" name="docs" value="1131" />Title page</label>
                </div>
            </div>
            <div class="document">
                <div class="section">
                    <label class="label_check section_label blue" for="docs_1118">
                        <input type="checkbox" id="docs_1118" name="docs" />Section 1</label>
                    <blockquote>
                        <div class="subsection">
                            <label class="label_check sub_label lightblue">
                                <input type="checkbox"  name="docs" value="1119" />Subsection 1.1</label>
                        </div>
                        <div class="subsection">
                            <label class="label_check sub_label lightblue" for="docs_1120">
                                <input type="checkbox" id="docs_1120" name="docs" value="1120" />Subsection 1.2</label>
                        </div>
                        <div class="subsection">
                            <label class="label_check sub_label lightblue" for="docs_1121">
                                <input type="checkbox" id="docs_1121" name="docs" value="1121" />Subsection 1.3</label>
                        </div>
                        <div class="subsection">
                            <label class="label_check sub_label lightblue" for="docs_1122">
                                <input type="checkbox" id="docs_1122" name="docs" value="1122" />Subsection 1.4</label>
                        </div>
                    </blockquote>
                </div>
            </div>
            <div class="document">
                <div class="section">
                    <label class="label_check section_label blue" for="docs_1123">
                        <input type="checkbox" id="docs_1123" name="docs" />Section 2</label>
                    <table>
                        <tr><div class="subsection">
                            <label class="label_check sub_label lightblue" for="docs_1124">
                                <input type="checkbox" id="docs_1124" name="docs" value="1124" />Subsection 2.1</label>
                        </div></tr>
                        <tr><div class="subsection">
                            <label class="label_check sub_label lightblue" for="docs_1124">
                                <input type="checkbox" id="docs_1124" name="docs" value="1125" />Subsection 2.2</label>
                        </div></tr>
                        <tr></tr><div class="subsection">
                            <label class="label_check sub_label lightblue" for="docs_1126">
                                <input type="checkbox" id="docs_1126" name="docs" value="1126" />Subsection 2.3</label>
                        </div><tr>
                        <tr><div class="subsection">
                            <label class="label_check sub_label lightblue" for="docs_1127">
                                <input type="checkbox" id="docs_1127" name="docs" value="1127" />Subsection 2.4</label>
                        </div></tr>
                    </table>
                </div>
            </div>
            <button type="submit" class="icon icon-arrow-white">Submit</button>
        </div>

    </body>
</html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 JQuery選擇下拉列表中的所有值，復選框不起作用 select 全部打開復選框無法使用 jquery Jquery“全選”復選框 jQuery選擇復選框-全選 Django復選框通過jQuery全選 jQuery選擇帶有toggleClass的所有復選框 全選並取消選中帶有jQuery的復選框 選中所有復選框，其中一個復選框不起作用 Google chrome select Javascript 或控制台的所有復選框 使用jQuery創建“全部選中” /“全部選中”復選框嗎？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM