在选中或取消选中时更改 CheckBox 的颜色？答案

【问题标题】：Change the color of CheckBox on check or uncheck?在选中或取消选中时更改 CheckBox 的颜色？
【发布时间】：2016-08-19 19:46:05
【问题描述】：

我有一个输入字段类型复选框，我想在选中和取消选中时更改颜色，我试过 ng-class = "unChecked =!checked" 这样，但对我不起作用。

这是我的html代码：

<input type="checkbox" ng-class = "unChecked =!checked" class="checkbox" ng-model="inventory.productName" ng-checked='true' ng-true-value="true" ng-false-value="false" ng-click="inventory.addRemoveColumn(inventory.productName,'productInfo.productName', 'PRODUCT NAME')" />Product Name
                <br/>

请告诉我该怎么做？

【问题讨论】：

标签： angularjs checkbox

【解决方案1】：

试试这个。 ng-value-true 的复选框默认值为“true”，ng-false-value 为“false”。

  ng-class = "{'checked': inventory.productName, 'unchecked' : !inventory.productName}"

var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
   $scope.inventory = {productName:false};
})

.checked{
    background-color:red;
  }

.unchecked{
   background-color:green;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
  
  <div ng-class = "{'checked': inventory.productName, 'unchecked' : !inventory.productName}">
   <input type="checkbox"  class="checkbox" ng-model="inventory.productName"  />Product Name
                </div>
</div>

【讨论】：

感谢您的回复，但我希望复选框背景颜色必须发生变化
看到这个答案stackoverflow.com/questions/7398462/…

【解决方案2】：

将 ng-class 更改为 ng-class="{'unChecked' : !inventory.productName}"。

话虽如此，您真的需要 angular/javascript 吗？在 CSS 中你可以这样做：

.checkbox{
/// Styles when unchecked
}

.checkbox:checked{
//// Styles when checked
}

【讨论】：

【解决方案3】：

使用此代码

<input type="checkbox" ng-class = "{'class1':inventory.productName == 'PRODUCT NAME', 'class2':inventory.productName != 'PRODUCT NAME'}" class="checkbox" ng-model="inventory.productName" ng-checked='true' ng-true-value="true" ng-false-value="false" ng-click="inventory.addRemoveColumn(inventory.productName,'productInfo.productName', 'PRODUCT NAME')" />Product Name

【讨论】：

【解决方案4】：

请参阅demo。

请在下面找到代码：

HTML：

<div ng-app="app" ng-controller="test">
  <label ng-class="{'red': inventory.productName == 'false', 'green': inventory.productName == 'true'}">
    <input type="checkbox" class="checkbox" ng-model="inventory.productName" ng-checked='true' ng-true-value="true" ng-false-value="false" ng-click="inventory.addRemoveColumn(inventory.productName,'productInfo.productName', 'PRODUCT NAME')" ng-init="inventory.productName = 'true'"
    />Product Name
  </label>
  <br/>
</div>

JS：

var app = angular.module('app', []);

app.controller('test', function($scope) {

});

CSS：

.red {
  color: red;
}

.green {
  color: green;
}

【讨论】：

我必须更改复选框背景颜色，可以吗
您可以将CSS中的color属性替换为background-color的属性
我尝试了两种背景颜色，背景属性，它没有采取

【解决方案5】：

试试这个。你必须添加条件类。这是工作的fiddle

<input type="checkbox"  ng-model="inventory.productName" ng-true-value="true" ng-false-value="false" /><span ng-class = "{'checked': inventory.productName=='true', 'unChecked' : inventory.productName=='false'}">Product Name</span>
            <br/>

【讨论】：

onclick，它只添加未选中，之后它不会改变。
另外，如果您可以将此标记为已回答，那将对我和其他 SO 用户有所帮助