4

我正在使用材料组件的 MDCCheckbox 组件。这是html代码

<div class="mdc-checkbox" data-mdc-auto-init="MDCCheckbox">
  <input type="checkbox"
         class="mdc-checkbox__native-control"/>
  <div class="mdc-checkbox__background">
    <svg class="mdc-checkbox__checkmark"
         viewBox="0 0 24 24">
      <path class="mdc-checkbox__checkmark__path"
            fill="none"
            stroke="white"
            d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
    </svg>
    <div class="mdc-checkbox__mixedmark"></div>
  </div>
</div>

我想听这个元素上的更改事件，所以我添加了监听器

const cbEl = document.querySelector('.mdc-checkbox');

cbEl.addEventListener('MDCCheckbox:change', ({detail}) => {
    console.log(detail)
});

但这不起作用。使用 MDCIconToggle 组件也是如此。这是正确的方法吗？

以及如何将其状态设置为不确定？

当我单击复选框时，涟漪效果会冻结。如何解决这个问题？文档太差了。

4

2 回答 2

1

请试试

const cbEl = document.querySelector('.mdc-checkbox');
var checkbox = document.querySelector('.mdc-checkbox input');//Find your checkbox input

checkbox.addEventListener('click', () => {
    console.log(cbEl.checked); //will return true or false
});
于 2018-10-23T12:18:37.063 回答
0

在Google MDC 复选框版本 11.0.0 中没有MDCCheckbox:change事件。所以你可以这样做：

const checkbox = new mdc.checkbox.MDCCheckbox(document.querySelector('.mdc-checkbox'));
   
let checkboxInput = document.getElementById('checkbox-1');
checkboxInput.addEventListener('click', () => {
   // do something
});

HTML：

<div class="mdc-checkbox">
   <input type="checkbox" class="mdc-checkbox__native-control" id="checkbox-1"/>
   <div class="mdc-checkbox__background">
       <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
           <path class="mdc-checkbox__checkmark-path" fill="none"
                       d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
       </svg>
       <div class="mdc-checkbox__mixedmark"></div>
   </div>
   <div class="mdc-checkbox__ripple"></div>
</div>
于 2022-02-25T09:34:34.020 回答