javascript - 材料设计精简版复选框检查属性未定义
问题描述
我有一个复选框,如果选中,将选中另一个复选框。我正在使用材料设计。未定义的材料框复选框的选中属性。如何使选中的属性成为定义?我究竟做错了什么?
<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>
解决方案
Material Design Lite API 的文档在他们将其置于“有限支持”并转移到Web 的 Material Components之前似乎从未完全完成。您可以筛选MDL 复选框的源代码,以查看标签元素是显示的组成部分,并且需要在该元素上调用 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() {
const 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>
推荐阅读
- c# - 如何在我的函数中防止 SQL 注入?
- sql - 选择一个值(带有标准)高于另一个表中的值(带有不同标准)的所有值
- django - 'tuple' 对象没有属性 'get' 属性错误
- java - Linux 上的 Intellij:Android 项目创建失败并出现错误
- objective-c - 如何以编程方式取消隐藏mac os中的隐藏应用程序?
- python - PYTHON 连接到 Google 团队云端硬盘
- javascript - 如何将数据值设置为div下的div?
- angularjs - 我正在发送一个 angularjs php id,但它不是
- python - Python3 布尔 if 语句
- sql - SQL - 其中第 1 列第 1 行中的值与第 2 列第 1 行不同