Question

当选中特定复选框时，我正在尝试更改其颜色。我尝试仅通过使用CSS来做到这一点，但这会导致所有<div>元素的颜色发生变化。

我使用的大多数CSS来自Material Design。我试图添加自己的自定义类：

$('#wrong').change(function() {
  if (this.checked) {
    $('.check').addClass('red');
  } else {
    $('.check').removeClass('red');
  }
});

$('#wrong').change(function() {
  if ($(this).is(":checked")) {
    $('.check').addClass('red');
  } else {
    $('.check').removeClass('red');
  }
});

.form-check .form-check-sign .check {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, .54);
  overflow: hidden;
  z-index: 1;
  border-radius: 3px;
}

.form-check .form-check-sign .check:before {
  position: absolute;
  content: "";
  transform: rotate(45deg);
  display: block;
  margin-top: -3px;
  margin-left: 7px;
  width: 0;
  color: #fff;
  height: 0;
  box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset;
  animation: checkboxOff 0.3s forwards;
}

.form-check .form-check-input:focus+.form-check-sign .check:after {
  opacity: 0.2;
}

.form-check .form-check-input:checked+.form-check-sign .check {
  background: #00BCD4;
}

.form-check .form-check-input:checked+.form-check-sign .check .red {
  background: #FF0000;
}

.red {
  background: #FF0000;
  opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="wrong" name="wrong" disabled value="1"'.$checkederr.'>
    <span class="form-check-sign">
    <span class="check"></span>
    </span>
  </label>
</div>

以某种方式将所有复选框和<span>元素（包含.chek类）都选择为红色。

“。$ checkederr”的代码php。是：

while($row == $querydoc -> fetch(PDO::FETCH_ASSOC))
{
  ...
  if($row['errato'] == 1)
    $checkederr="checked";
  else
    $checkederr="";
}

在给定的<span>标签中添加一个类，例如“ check red”，只允许我想要的相反。

Answer 1

输入复选框应如下所示，检查checkederr的使用方式。

<input class="form-check-input" type="checkbox" id="wrong" name="wrong" value="1{$checkederr}">

从输入中删除disabled。

3。您在这里if($(this).is(":checked")) { {有2个开括号，它们应该是if($(this).is(":checked")) {

无错误代码：- （在底部包括CSS）

$('#wrong').change(function() {
  if (this.checked) {
    $('.check').addClass('red');
  } else {
    $('.check').removeClass('red');
  }
});

$('#wrong').change(function() {
  if ($(this).is(":checked")) {
    $('.check').addClass('red');
  } else {
    $('.check').removeClass('red');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="wrong" name="wrong" value="1{$checkederr}">
    <span class="form-check-sign">
      <span class="check"></span>
    </span>
  </label>
</div>

Answer 2

我认为您的问题是重复的，但是当您重写问题时，我注意到您使用单独的元素来填充颜色。

$('#wrong').change(function() {
  //Simply toggle the class with jquery's "$.toggleClass()" method
  $(".check").toggleClass("red");
});

.form-check .form-check-sign .check {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, .54);
  overflow: hidden;
  z-index: 1;
  border-radius: 3px;
}

.form-check .form-check-sign .check:before {
  position: absolute;
  content: "";
  transform: rotate(45deg);
  display: block;
  margin-top: -3px;
  margin-left: 7px;
  width: 0;
  color: #fff;
  height: 0;
  box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0 inset;
  animation: checkboxOff 0.3s forwards;
}

.form-check .form-check-input:focus+.form-check-sign .check:after {
  opacity: 0.2;
}

.form-check .form-check-input:checked+.form-check-sign .check {
  background: #00BCD4;
}

/* Removed the space between .check and .red */
.form-check .form-check-input:checked+.form-check-sign .check.red {
  background: #FF0000;
}

.red {
  background: #FF0000;
  opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
  <label class="form-check-label">
    <!-- Removed disabled state from the input below -->
    <!-- With PHP: -->
    <!--<input class="form-check-input" type="checkbox" id="wrong" name="wrong" value="1" <?php echo $checkederr;?> >-->
    <!-- Or you could echo the entire element within PHP: -->
    <!--<?php
      echo "<input class='form-check-input' type='checkbox' id='wrong' name='wrong' value='1' " . $checkederr . ">";
    ?>-->
    <!-- Without PHP: -->
    <input class="form-check-input" type="checkbox" id="wrong" name="wrong" value="1">
    <span class="form-check-sign">
    <span class="check"></span>
    </span>
  </label>
</div>

有多种方法可以完成此操作，但这将是一个简单的示例。如果您需要更多帮助，请告诉我。

如果通过ID选中复选框，如何更改背景颜色

2 个答案: