jQuery复选框，请选中所有在Chrome上不可用的功能

时间：2018-08-16 14:21:55

标签： 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 个答案:

答案 0 :(得分：0)

我认为您忘记了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>
相关问题
最新问题