Javascript eventListener未按预期更改CSS

关于使用javascript事件侦听器更改某些元素的CSS样式，我有一个问题

目前我有一个表单，上面有3个样式化的按钮，如下所示： 用户可以使用全选复选框选择1、2或全部3

<button type="button" class="myButton" id="skype">Skype ping</button>
<button type="button" class="myButton" id="returnedim">Returned IM</button>
<button type="button" class="myButton"id="complaint">CallerComplaint</button> 
 All of the above <input type="checkbox" value="all" name="all" id="allReasons">

<input type="hidden" name="contacthidden1" value="">                        
<input type="hidden" name="contacthidden2" value="">
<input type="hidden" name="contacthidden3" value="">

Skype-ping
即时通讯回复
呼叫者抱怨
所有这些

我的问题发生在“全部”选项上。它没有像我期望的那样应用CSS。我有一个名为“clicked”的类，它将按钮的样式转换为绿色，还有一个unclicked类，它将按钮的颜色转换为原始颜色

我遇到了这样的问题：用户可以选择一个或两个项目，并应用单击的类颜色，然后如果单击“全部”，它会使css样式变得不正常，有些按钮的样式是绿色的，有些则不是

以下是相关代码：

 var contactArray = ["skype", "returnedim", "complaint"];

    document.getElementById('allReasons').addEventListener('change', function() {
            if (document.getElementById("allReasons").checked == true) {

                //If 'All' is checked then any previously checked items should be reset to default state first

                for (var i = 0, len=contactArray.length; i<len; i++){
                   resetClickedClass(contactArray[i]);
                    alert('1');
                   setClickedClass(contactArray[i]);
                    alert('2');
                }

                $('input[name=contacthidden1]').val("Skype Ping");
                $('input[name=contacthidden2]').val("Returned IM");
                $('input[name=contacthidden3]').val("Caller Complaint");
            } else {
                //Reset values to nothing when unchecked
                for (var i = 0, len=contactArray.length; i<len; i++){
                    resetClickedClass(contactArray[i]);
                }
                $('input[name=contacthidden1]').val("");
                $('input[name=contacthidden2]').val("");
                $('input[name=contacthidden3]').val("");
            }
        })

        function resetClickedClass(selector){
            $("#" + selector).toggleClass("unclicked");
        }

        function setClickedClass(selector){
            $("#" + selector).toggleClass("clicked");
        }

var contactArray=[“skype”、“returnedim”、“投诉”]；
document.getElementById（'allReasons'）。addEventListener（'change'，function（）{
if（document.getElementById（“AllReasions”）.checked==true）{
//如果选中“全部”，则应首先将以前选中的任何项目重置为默认状态
对于（var i=0，len=contactArray.length；i来说，答案很简单……您是说要删除该类，但实际上是调用toggle方法

    function resetClickedClass(selector){
        $("#" + selector).toggleClass("unclicked");  <-- should be removeClass
    }

    function setClickedClass(selector){
        $("#" + selector).toggleClass("clicked");   <-- should be addClass
    }

函数重置ClickedClass（选择器）{
$（“#”+选择器）。切换类（“未锁定”）；为什么不使用复选框？标签可以设计成按钮的样式……按钮更漂亮，使用它的团队更喜欢它们，然后是一个简单的表单您的重置和单击调用切换……没有意义，应该是添加或删除……您想要的功能是复选框，请在删除之前检查答案决定使用按钮，这是一种黑客行为。