Javascript 选中复选框时，将按钮颜色更改为绿色

当我单击复选框上的（检查）时，我想更改按钮选择菜单的颜色

按钮选择菜单：

<button id="bttn" onclick="loadMenu()" data-toggle="modal" href="#myModalMenu"
    class="btn btn-circle red-intense">Select Menu</button>

<div class="modal fade rotate" id="myModalMenu">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">×</button>
                <h6 class="modal-title"></h6>
            </div>

            <div class="modal-body">
                <div class="portlet box orange-meadow">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-gift"></i>MENU
                        </div>
                    </div>
                </div>
                <div class="container"></div>
                <div id="menuView">
<ul>
                    <li class="product-list-menu"><INPUT TYPE="CHECKBOX" id="checkbox_product" NAME="product" VALUE="product" onclick="manageMenuSelection(${product})"> product.name </li>
<ul>                
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-circle red-intense">Ok</button>
                    <a href="#" data-dismiss="modal" class="btn">Skip</a>
                </div>
            </div>
        </div>
    </div>
</div>

选择菜单

模态：

<button id="bttn" onclick="loadMenu()" data-toggle="modal" href="#myModalMenu"
    class="btn btn-circle red-intense">Select Menu</button>

<div class="modal fade rotate" id="myModalMenu">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">×</button>
                <h6 class="modal-title"></h6>
            </div>

            <div class="modal-body">
                <div class="portlet box orange-meadow">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-gift"></i>MENU
                        </div>
                    </div>
                </div>
                <div class="container"></div>
                <div id="menuView">
<ul>
                    <li class="product-list-menu"><INPUT TYPE="CHECKBOX" id="checkbox_product" NAME="product" VALUE="product" onclick="manageMenuSelection(${product})"> product.name </li>
<ul>                
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-circle red-intense">Ok</button>
                    <a href="#" data-dismiss="modal" class="btn">Skip</a>
                </div>
            </div>
        </div>
    </div>
</div>

×
菜单

product.name

好啊

需要一个javascript来更改按钮的颜色，尝试了许多选项和事情，但都没有效果

---

我的复选框的id是动态的，它不断得到更改

您可以做的是将css添加到按钮并使用javascript切换css

css

javascript

 if(document.getElementById('#checkbox_product').checked) {
    $("#ButtonID").removeClass('buttoncolorred').addClass('buttoncolorgreen');
} else {
    $("#ButtonID").removeClass('buttoncolorgreen').addClass('buttoncolorred');
}

---

应该是这样的。目前无法100%测试它。

您可以做的是将css添加到按钮并使用javascript切换css

css

javascript

 if(document.getElementById('#checkbox_product').checked) {
    $("#ButtonID").removeClass('buttoncolorred').addClass('buttoncolorgreen');
} else {
    $("#ButtonID").removeClass('buttoncolorgreen').addClass('buttoncolorred');
}

应该是这样的。目前无法100%测试它。

您必须收听

复选框

单击将更改按钮颜色的添加类

绿色

：

$('#checkbox_product').on('click',function(){
  $('#bttn').toggleClass('green');
})

希望这有帮助

$（'checkbox_product'）。在（'click'，function（）上{
$（'#bttn'）。toggleClass（'green'）；
});
.green{
背景色：rgba（0,128,0,0.39）；
}

选择菜单
×
菜单


product.name

好啊

您必须收听
复选框
单击将更改按钮颜色的添加类
绿色
：

$('#checkbox_product').on('click',function(){
  $('#bttn').toggleClass('green');
})

希望这有帮助


$（'checkbox_product'）。在（'click'，function（）上{
$（'#bttn'）。toggleClass（'green'）；
});
.green{
背景色：rgba（0,128,0,0.39）；
}

选择菜单
×
菜单


product.name

好啊
试试这个：


$（“输入[class='myCheckbox']）。单击（函数（）{
if（$（“#formID输入：复选框：选中”）.length>0）{
$（“.checkSubmit”）.addClass（“活动”）；
}
否则{
$（“.checkSubmit”）.removeClass（'active'）；
}
});
。检查提交{
背景色：红色；
}
.checkSubmit.active{
背景颜色：绿色；
}

我有一辆自行车
我有一辆自行车
我有一辆自行车
我有一辆自行车
试试这个：


$（“输入[class='myCheckbox']）。单击（函数（）{
if（$（“#formID输入：复选框：选中”）.length>0）{
$（“.checkSubmit”）.addClass（“活动”）；
}
否则{
$（“.checkSubmit”）.removeClass（'active'）；
}
});
。检查提交{
背景色：红色；
}
.checkSubmit.active{
背景颜色：绿色；
}

我有一辆自行车
我有一辆自行车
我有一辆自行车
我有一辆自行车
你的
加载菜单（）在哪里？
你的JavaScript代码在哪里？。如何添加和删除类有一个很好的答案。那么您尝试过的javascript在哪里呢？请更新您的问题并包含相关的源代码。loadMenu（）调用Web服务并从DB@owaisaslam获取所有菜单。您的
loadMenu（）
在哪里？您的JavaScript代码在哪里？。如何添加和删除类有一个很好的答案。那么您尝试过的javascript在哪里呢？请更新您的问题并包含相关的源代码。loadMenu（）调用Web服务并获取从DB@owaisaslamid到my复选框的所有菜单是动态的，并且它不断得到更改，因为菜单中有100个项目。您希望它附加到所有100个项目吗？您可以按类或给它一个模式来执行此操作。还有，在给定时间，页面中存在多少这些复选框。全部还是只有一个？有100多个复选框。即使选中1，“选择菜单”按钮必须为绿色@Anuja Agarwalt“我的复选框id”是动态的，并且它会不断更改，因为菜单中有100个项目。您希望它附加到所有100个项目吗？您可以按类执行此操作，也可以给它一个模式。在给定时间，页面中有多少个复选框。全部还是只有一个？有100多个复选框。即使选中1，选择菜单按钮也必须为绿色@Anuja Agarwalt问题是我在迭代产品时每个复选框上的ID都在更改。问题是我在迭代产品时每个复选框上的ID都在更改。