如何使用template.find(）来选中或不选中复选框

how to use template.find() to get the checkbox checked or not?

本文关键字：复选框 何使用 template find      更新时间：2024-06-29

我有一个带有复选框输入的模板：

如果我使用这个html

 <label class="checkbox-inline">
  <input type="checkbox" name="apPartTime"  
      checked="{{isWorkChecked 'isPartTime'}}">Part Time
</label>

以及let isPartTime = $('[name=apPartTime]').is(':checked');

我可以返回true或false，但如果我只想使用javascript，如何获取布尔值？

如果html像这个

<label class="checkbox-inline">
  <input type="checkbox"  id ="apFullTime" 
      checked="{{isWorkChecked 'apFullTime'}}">Full Time
</label>

我想检查这个复选框是否选中

我试过

let isFullTime = template.find('#apFullTime').value;
let isFullTime = template.find('#apFullTime');

没有一个是有效的。

如果将复选框包装在表单中，则可以通过访问event.target.myId.checked来检索值。

例如：

<template name="myTemplate">
    <form class="my-form">
        <label class="checkbox-inline">
            <input type="checkbox" id="ap-full-time-form">Full Time
        </label>
        <button type="submit">Submit</button>
    </form>
</template>

Template.myTemplate.events({
    'submit .my-form'(event, instance) {
        event.preventDefault();
        let isChecked = event.target["ap-full-time-form"].checked;
        console.log(isChecked);
    }
});

如果要为输入类型注册单独的Meteor事件，可以使用event.target.checked直接访问该值。

例如：

<template name="myTemplate">
    <label class="checkbox-inline">
        <input type="checkbox" id="ap-full-time-form">Full Time
    </label>
</template>

Template.myTemplate.events({
    'click input'(event, instance) {
        let isChecked = event.target.checked;
        console.log(isChecked);
    }
});

此外，您可以简单地使用instance.find("#myId").checked:

Template.myTemplate.events({
    'submit .my-form'(event, instance) {
        event.preventDefault();
        let isChecked = instance.find("#ap-full-time-form").checked;
        console.log(isChecked);
    }
});
相关文章：