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>

在复选框周围添加Label标签会使输出看起来更好，但是现在选中全部复选框不会导致其他复选框被选中/取消选中，就像没有Label标签一样。

Answer 1

您需要刷新单选按钮的状态。

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

可以找到文档here

Answer 2

您的代码运行正常，您的复选框已经过正确检查和取消选中。唯一的问题是勾选标记由setting the class of the label切换，位于ui-checkbox-off和ui-checkbox-on的复选框上方。这是我对它的修复..

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');    
        }            
    });                
});

JQuery css标签阻止Select All工作

2 个答案: