javascript - 通过单击使用复选框输入获取特定值

Question

我正在用图像替换标准输入复选框，并且遇到以下代码的两个主要问题:

1. 无论我点击哪个图像(复选框输入)，值都保持不变，而不是改变。 (打印值见控制台)。

2. 当输入处于事件状态时，我想更改背景颜色，但出于某种原因，在页面加载时，所有输入都具有红色背景颜色(不应该有任何背景颜色)。然后，如果我点击输入，什么都不会改变。

有没有人看到我做错了什么？

Jsfiddle

var interest = $('.interest');
interest.click(function() {
  $('.interestCheck').prop('checked', true);
  var check = $('.interestCheck').val();
  console.log(check);
});
if ($('.interestCheck').prop('checked', true)) {
  $('.interestBox').addClass('active');
}

.interest {
  width: 250px;
  height: auto;
  cursor: pointer;
}

.interestBox {
  width: 100%;
  border: 1px solid #CFCFCF;
  border-radius: 2px;
}

.interestBox.active {
  background: red;
}

.interestBox img {
  width: 100%;
}

.interestTitle {
  font-size: 1.3rem;
  text-align: center;
  margin: 5px 0 0 0;
}

.interestCheck {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="interest">
  <div class="interestBox">
    <img src="https://s3.us-east-2.amazonaws.com/mbkitsystems/linearIcon.png" alt="Linear Motion">
  </div>
  <h3 class="interestTitle">Linear Motion</h3>
  <input type="checkbox" value="Linear Motion" class="interestCheck">
</div>
<div class="interest">
  <div class="interestBox">
    <img src="https://s3.us-east-2.amazonaws.com/mbkitsystems/linearIcon.png" alt="Linear Motion">
  </div>
  <h3 class="interestTitle">Material Handling</h3>
  <input type="checkbox" value="Material Handling" class="interestCheck">
</div>
<div class="interest">
  <div class="interestBox">
    <img src="https://s3.us-east-2.amazonaws.com/mbkitsystems/linearIcon.png" alt="Linear Motion">
  </div>
  <h3 class="interestTitle">Enclosures</h3>
  <input type="checkbox" value="Enclosures" class="interestCheck">
</div>

Answer 1

• 您需要为 jQuery 选择器添加上下文。

您可以通过添加 this 作为您的 jQuery 选择器的第二个参数来做到这一点:$('yourSelector',this)。

• 如果您想在每次点击时选中/取消选中复选框，则需要替换

$('.interestCheck', this).prop('checked',true)

通过

$('.interestCheck', this).prop('checked', !$('.interestCheck', this).prop('checked'));

• 另外，您的最后一个 if 可以替换为一个简单的 .toggleClass 并且需要在您的 click 处理程序中。

var interest = $('.interest');
interest.click(function() {
  $('.interestCheck', this).prop('checked', !$('.interestCheck', this).prop('checked'));
  var check = $('.interestCheck', this).val();
  console.log(check);
  $('.interestBox', this).toggleClass('active');
});

.interest {
  width: 250px;
  height: auto;
  cursor: pointer;
}

.interestBox {
  width: 100%;
  border: 1px solid #CFCFCF;
  border-radius: 2px;
}

.interestBox.active {
  background: red;
}

.interestBox img {
  width: 100%;
}

.interestTitle {
  font-size: 1.3rem;
  text-align: center;
  margin: 5px 0 0 0;
}

.interestCheck {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="interest">
  <div class="interestBox">
    <img src="https://s3.us-east-2.amazonaws.com/mbkitsystems/linearIcon.png" alt="Linear Motion">
  </div>
  <h3 class="interestTitle">Linear Motion</h3>
  <input type="checkbox" value="Linear Motion" class="interestCheck">
</div>
<div class="interest">
  <div class="interestBox">
    <img src="https://s3.us-east-2.amazonaws.com/mbkitsystems/linearIcon.png" alt="Linear Motion">
  </div>
  <h3 class="interestTitle">Material Handling</h3>
  <input type="checkbox" value="Material Handling" class="interestCheck">
</div>
<div class="interest">
  <div class="interestBox">
    <img src="https://s3.us-east-2.amazonaws.com/mbkitsystems/linearIcon.png" alt="Linear Motion">
  </div>
  <h3 class="interestTitle">Enclosures</h3>
  <input type="checkbox" value="Enclosures" class="interestCheck">
</div>