如何更改复选框值的颜色

Question

我想更改复选框值的颜色，例如如果它被选中它显示绿色文本如果它未被选中它显示红色这里是简单的输入类型

但我不确定如何给这些真值和假值上色，如果有人知道请帮助，谢谢！ P.S 如果这有助于人们理解我的问题，我现在已经把整个代码放了。

            <label>Other Information:</label>
            <textarea v-model="student.otherInformation"></textarea> <br /><br />

            <input type="checkbox" v-model="student.agree" true-value="I want to receive promotions"
            false-value="I Don't want to receive promotions">

            <span>Agree receive our promotions.</span><br><br>
            <button type="submit" class="button" >Add a new student</button>
        </form>

Answer 1

您可以绑定样式：

new Vue({
  el: '#demo',
  data() {
    return {
      student: {name: "", gender: "male", age: 0, country: "", hobby: [], otherInformation: "", agree: ""},
      students: [{name: "Mike", gender: "male", age: 23,country: "ZM", hobby: ["Studying"], otherInformation: "I want say nothing but try your best.", agree: "I Don't want to receive promotions"}, {name: "Emma", gender: "famale", age: 18, country: "PK", hobby: ["Playing Game",
 "Travelling"], otherInformation: "Please contact me anytime.", agree: "I want to receive promotions"}, {name: "Emily", gender: "famale", age: 20, country: "BD", hobby: ["Studying", "Eating", "Travelling"], otherInformation: "Tell me your problem.", agree: "I Don't want to receive promotions"}],
      countries: [{name: "China", abr: "CN"}, {name: "Zambia", abr: "ZM"}, {name: "Bangladesh", abr: "BD"}, {name: "India", abr: "IN"}, {name: "Pakistan", abr: "PK"}],
      hobbies: ["Studying", "Playing Game", "Eating", "Travelling"]
    }
  },
  methods: {
    addStudent() {
      this.students.push(this.student)
    },
    removeTask: function(index) {
      this.students.splice(index, 1);
    },
    handleHobbies(hobby) {
      this.student.hobby.includes(hobby) ? this.student.hobby =  this.student.hobby.filter(h => h !== hobby) : this.student.hobby.push(hobby)
    },
    //  method for selecting style
    colorIt(i) {
      return this.students[i].agree === 'I want to receive promotions' ?  'color: green' : 'color: red'
    },
  },
})

.true-value {
  color: Green;
}
.false-value {
  color: Red;
}
.btn-danger {
  background-color: transparent;
  border: 1px solid #3498db;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <h3>Student Information Collection</h3><hr>
  <form class="basic-grey"  @submit.prevent="addStudent">
    <div class=" form-group">
      <label for="name">Student Name:</label>
      <input id="name" type="text" required v-model="student.name">
    </div>
    <label>Gender:</label >
      Male<input type="radio" v-model="student.gender" value="male" >
      Female<input type="radio"  v-model="student.gender" value="female"><br />
    <label for="age">Age:</label>
    <input id="age"  type="number" v-model="student.age"> <br />
    <label>Country:</label>
    <select v-model="student.country">
      <option disabled selected value="">Please select your country</option>
      <option v-for="(country, i) in countries" :key="i" :value="country.abr">
        {{country.name}}
      </option>
    </select>
    <label>Hobby:</label>
    <span v-for="(hobby, idx) in hobbies" :key="idx">
      <input type="checkbox" @change="handleHobbies(hobby)" value="Studying">{{ hobby }}
    </span><br />
    <label>Other Information:</label>
    <textarea v-model="student.otherInformation"></textarea> <br />
    <input type="checkbox" v-model="student.agree" true-value="I want to receive promotions"
    false-value="I Don't want to receive promotions">
    <span>Agree receive our promotions.</span><br>
    <button type="submit" class="button" >Add a new student</button>
  </form>
  {{student}}
  <h3>Students list</h3><hr>
  <table id="rounded-corner">
    <thead>
      <th class="rounded-company">Name</th>
      <th>Gender</th>
      <th>Age</th>
      <th>Country</th>
      <th>Hobby</th>
      <th>Receive Promotions</th>
      <th class="rounded-q4">Operation</th>
    </thead>
    <tbody>
      <tr v-for="(student, index) in students" :key="index">
        <td>{{student.name}}</td>
        <td>{{student.gender}}</td>
        <td>{{student.age}}</td>
        <td>{{student.country}}</td>
        <td>{{student.hobby}}</td>
        <!--  bind style and call method -->
        <td :style="colorIt(index)">{{student.agree}}</td>
        <td><button type="button" class="btn-danger" @click="removeTask(index)">Delete</button></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

我不懂 vue，但你可以用普通的 html 和 css

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #F00;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00FF00;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
</style>
<body>

<h1>Custom Checkboxes</h1>
<label class="container">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

</body>
</html>

Answer 3

首先把文本放在像标签一样的语义HTML 然后将下面的代码放在检查和取消选中的输入上

input[type="checkbox"]+* {
        color: red !important;
    }

    input[type="checkbox"]:checked+* {
        color: green !important;
    }

如何更改复选框值的颜色

How to change color of checkbox values

javascript

vue.js

vuejs2