JQuery css label prevents Select All from working

Question

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <title>collapsible demo</title>  
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">  
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>  
    <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <script>
    $(document).ready(function(){ 
        $("#cb-mlb-all").change(function(){
            $(".cb-mlb").prop('checked', $(this).prop("checked"));
        });                
    });
    </script>

</head>

<body>
<form>
    <div class="ui-field-contain">
        <fieldset>
            <div class="ui-input-form">
                <ul class="chk-container">
                <label for="cb-mlb-all">Select all<input type="checkbox" value="" id="cb-mlb-all" /></label>
                <label for="cb-mlb-ar">Arizona<input class="cb-mlb" type="checkbox" value="" id="cb-mlb-ar" /></label>
                <label for="cb-mlb-at">Atlanta<input class="cb-mlb" type="checkbox" value="" id="cb-mlb-at" /></label>
                </ul>
            </div>
        </fieldset>
    </div>
</form>
</body>
</html>

Adding the Label tags around the checkboxes makes the output look better, however now the Select All checkbox does not cause the other checkboxs to get checked / unchecked like they did without the Label tags.

If I comment out the line: , then the Select All works again but the output does not look as good. — Jack, Mar 02 '16 at 08:22
Actually your code works fine for me: https://jsfiddle.net/Shedal/gqm6n0fn/1/ — Dmytro Shevchenko, Mar 02 '16 at 08:22
@DmytroShevchenko Yes since you don't have the jquery-mobile pack in your fiddle. Just as Jack commented. — Hydrospanners, Mar 02 '16 at 08:24

Hydrospanners · Answer 1 · 2016-03-02T09:17:13.273

1

You need to refresh the states of the radio buttons.

$(document).ready(function() {
    $("#cb-mlb-all").change(function() {
        $('.cb-mlb').prop('checked',$(this).is(':checked')).checkboxradio('refresh')
    });
});

The documentation can be found here

edited Mar 02 '16 at 09:17

answered Mar 02 '16 at 08:35

Hydrospanners

195
9

Found a duplicate [question/answer](http://stackoverflow.com/questions/17027566/how-to-check-checkbox-dynamically-jquery-mobile) – Hydrospanners Mar 02 '16 at 08:36
may be you can add this specific link to your answer https://api.jquerymobile.com/checkboxradio/#method-refresh – Rajshekar Reddy Mar 02 '16 at 09:11
1

@Reddy Thanks, i did. – Hydrospanners Mar 02 '16 at 09:17

Rajshekar Reddy · Answer 2 · 2016-03-02T09:05:31.903

1

Your code was working fine and your checkbox were getting checked and uncheked properly. Only issue was the tick mark is toggled by setting the class of the label which is above the checkbox to ui-checkbox-off and ui-checkbox-on Here is my fix to it..

Working Fiddle

  $(document).ready(function(){ 
    $("#cb-mlb-all").change(function(){
      $(".cb-mlb").prop('checked', $(this).prop("checked"));

      var $labels = $(".cb-mlb").parent().find('label');
        if($(this).prop('checked')){ // toggle the label classes           
          $labels.removeClass('ui-checkbox-off');    
          $labels.addClass('ui-checkbox-on');       
        }
        else{
         $labels.removeClass('ui-checkbox-on');
         $labels.addClass('ui-checkbox-off');    
        }            
    });                
});

edited Mar 02 '16 at 09:05

answered Mar 02 '16 at 08:36

Rajshekar Reddy

18,647
3
40
59

whoever it is ...What is the problem? why downvote, check the fiddle and care to comment. – Rajshekar Reddy Mar 02 '16 at 08:39
I upvoted you. I guess the downvoter's problem was that you didn't include code in your answer originally. – Dmytro Shevchenko Mar 02 '16 at 08:42
This isn't using the built-in & already included functionality of JQuery Mobile. Perhaps that's why? – Hydrospanners Mar 02 '16 at 08:42
oh my bad, ok thanks for the info @DmytroShevchenko , I was trying to include the snippet but for some reason its not working in snippet, So posted the Jsfiddle. – Rajshekar Reddy Mar 02 '16 at 08:43
Thank you all for your kind help!!! I tried Reddy's block of code above and now it works. I've been trying for weeks to fix this. Really appreciate everyone's help!!!! Jack – Jack Mar 08 '16 at 15:31
@Jack glad to know you fixed the issue, if this solution resolved your issue then you can mark it as answer so that it might help future audience – Rajshekar Reddy Mar 08 '16 at 15:37
Thanks to Dmytro and Hydrospanners as well. I haven't used Stacktrace actively. Not sure how to upvote. I clicked the up arrow on Reddy's answer it went up to 2 then back down to 1 within a second. Not sure if it worked.. – Jack Mar 08 '16 at 15:38
If you click it once, its a upvote, if you click again the vote is removed. Also to mark it answer there is a check mark icon which you need to select. – Rajshekar Reddy Mar 08 '16 at 15:40

JQuery css label prevents Select All from working

2 Answers2