简体   繁体   English

如何检查复选框是否已选中更改侦听器

[英]How to check if check box is checked with change listener

I am trying to check if a check box is checked and show an element on the page if it is checked. 我正在尝试检查是否已选中复选框,如果已选中,则在页面上显示一个元素。

This is my function: 这是我的功能:

function checkedTechSolutions(){    
    Y.one('#techsol input[type=checkbox]').on('change', function (e) {
        var target = e.currentTarget,
        techSBox = Y.one('#techsolutions');
        if (target.get('checked')){ 
            techSBox.show();
        } else techSBox.hide();
    }
}

This is my css: 这是我的CSS:

#techsolutions {width: 380px; height: 100px; background-color:#cee4f2; display: none;}
#techsolutions .box {text-align: center;} 

This is my html: 这是我的html:

<div id="techsolutions">

    <div class=box>
    <label for="TypeOfTS">Tech Solutions: </label>
    <select name="techSolutionsDrop">
        <option value="techServices">Choose your services </option>
    </select>
    </div>  

</div>

Some notes: 一些注意事项:

  • Your example lacked the checkbox in #techsol 您的示例缺少#techsol的复选框
  • Was checkedTechSolutions ever called? 是否曾经checkedTechSolutionscheckedTechSolutions You do not need a document ready type event to attach a listener to a checkbox when using YUI. 使用YUI时,不需要文档就绪类型事件即可将侦听器附加到复选框。
  • Use css classes to change visuals like this. 使用css类来更改视觉效果。 It is easier to understand and cleaner. 它更容易理解和清洁。

Take a look at the full solution in this jsfiddle 看看这个jsfiddle中的完整解决方案

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM