jQuery checkbox select all not working on Chrome

The below code works on JSFIDDLE but I could not get it work on Chrome for some reason. I modified the code on jsfiddle http://jsfiddle.net/Alfie/V5SSM/2/

to the code below. It runs on Jsfiddle but not on the browser. Any help is appreciated. There is something which I am missing which might be like I have to convert jquery code to html compatible format in order for the code to work.

<!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>

2 answers

  • answered 2018-08-16 14:38 Nimitkumar Shah

    Make sure you have added jquery cdn or script.

  • answered 2018-08-16 14:51 shivgre

    I think you forgot to include the jQuery 1.10.1 version. I used cdn and it worked fine on my chrome latest version.

    <!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>