Question

我有一个复选框，如果选中，将选中另一个复选框。我正在使用材质设计。物料框复选框的选中属性未定义。如何使被检查的属性定义？我在做什么错了？

This is the link where the problem happens

<script>
$(document).ready(function(){
  $("#exclude_all").change(function(){
    var element_all = document.querySelectorAll('[id="exclude_all"]');
    var elements = document.querySelectorAll('[id^="exclude_dir_"]');
    for(var i=0, n=elements.length; i<n; i++){
      var element = elements[i];
      if($('#exclude_all').is(":checked")) {
        element.MaterialCheckbox.check();
      } else {
        element.MaterialCheckbox.uncheck();
      }
    }
  });
});
</script>

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-light_blue.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
<ol style="padding-left:37px;list-style:none;font-size:12px;">
    <li>
        <label id="label_exclude_all" name="label_exclude_all" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="exclude_all" style="margin-left:3px;padding-left:31px;">
        <input type="checkbox" name="exclude_all" id="exclude_all" class="mdl-checkbox__input" value="Buscar""">
        <span class="mdl-checkbox__label" style="font-size:12px;color:#757575;">Excluir tudo</span>
        </label>
    </li>

    <li>
        <label name="label_exclude_dir_0" id="label_exclude_dir_0" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="exclude_dir_0" style="margin-left:3px;padding-left:31px;">
        <input type="checkbox" name="exclude_dir_0" id="exclude_dir_0" class="mdl-checkbox__input" value="Atibaia">
        <span class="mdl-checkbox__label" style="font-size:12px;color:#757575;">Atibaia</span>
        </label>
    </li>
</ol>
</body>
</html>

Answer 1

当我更改此设置时：

element.MaterialCheckbox.check();

对此：

element.parentNode.MaterialCheckbox.check();

我想您需要为标签而不是输入复选框做

。

我阅读的有关材料设计精简版的所有说明都没有提到您需要使用parentNode。这里的任何人都可以解释为什么？

马科斯

Answer 2

在将Material Design Lite API放入“有限支持”并转移到Material Components for the web之前，该文档似乎从未完全完成。您可以在source code for the MDL checkbox中进行筛选，以查看label元素对于显示是必不可少的，并且需要在该元素上调用MDL复选框功能。

下面是一个有效的代码片段，它针对您需要的元素，而无需执行额外的步骤：

$(document).ready(function() {
  
  // better to add a class to your checkbox labels and update this selector
  const elems = $('[id^=label_exclude_dir_]');
  
  $('#exclude_all').change(function() {
    let checked = $(this).is(':checked');
    elems.each(function() {
      if (checked) {
        this.MaterialCheckbox.check();
      } else {
        this.MaterialCheckbox.uncheck();
      }
      });
  });
  
});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-light_blue.min.css">
  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
  <ol style="padding-left:37px;list-style:none;font-size:12px;">
    <li>
      <label id="label_exclude_all" name="label_exclude_all" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="exclude_all" style="margin-left:3px;padding-left:31px;">
        <input type="checkbox" name="exclude_all" id="exclude_all" class="mdl-checkbox__input" value="Buscar">
        <span class="mdl-checkbox__label" style="font-size:12px;color:#757575;">Excluir tudo</span>
      </label>
    </li>

    <li>
      <label name="label_exclude_dir_0" id="label_exclude_dir_0" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="exclude_dir_0" style="margin-left:3px;padding-left:31px;">
        <input type="checkbox" name="exclude_dir_0" id="exclude_dir_0" class="mdl-checkbox__input" value="Atibaia">
        <span class="mdl-checkbox__label" style="font-size:12px;color:#757575;">Atibaia</span>
      </label>
    </li>
  </ol>
</body>

</html>

Answer 3

这是“物料复选框” HTML代码如何使用JQuery进行检查和取消检查。

<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
   <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="OnAccount">
         <input type="checkbox" id="OnAccount" class="mdl-checkbox__input" />
         <label class="mdl-checkbox__label">On Account</label>
   </label>
</div>

物料设计精简版复选框未定义属性

3 个答案: