使用单击复选框输入获取特定值

Question

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

1. 无论我点击哪个图像（复选框输入），该值都保持不变，而不是更改。 （有关打印值，请参阅控制台）。

2. 当输入处于活动状态时，我想要更改背景颜色，但由于某种原因，在页面加载时，所有输入都具有红色背景颜色（不应该是任何背景颜色）。然后，如果我点击输入，则没有任何变化。

有人看到我做错了吗？

Jsfiddle

＆＃13;
＆＃13;
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');
}
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

你必须这样做：

如果您未在点击功能中使用$(this)，则代码无法知道您点击了哪个元素，因为$('.interestCheck').val()将返回第一个对象值。

您也可以$('.interestCheck',this)

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

<强>演示

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

• 您需要为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>

Answer 3

我为您编写了一个非常简单的代码，说明如何单击并使类处于活动状态（也选中为true），然后在单击其他图像时将其删除。所以只有一个同时活跃。

您需要使用this关键字，这意味着事件发生的元素。然后，您可以在该元素中找到该复选框，更改其已检查状态，还可以找到您要激活的interestBox。

您还可以找到其他可能已激活的元素并将其停用。

您的整个逻辑必须位于点击功能中。如果您在函数外部使用if，则该条件将在window.load或dom.ready等处执行，但在您单击该项之前将执行该条件。所以if没用。它会检查，发现未选中复选框，并且在点击事件发生后不会更新并重新检查条件。

let interest = $('.interest');
interest.click(function() {
  let targetCheck = $(this).find('.interestCheck'),
    notCheck = $('.interestCheck').not(targetCheck)

  notCheck.prop('checked', false);
  notCheck.siblings(".interestBox").removeClass('active');


  targetCheck.prop('checked', true);
  targetCheck.siblings(".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/2.1.0/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="Material Handling">
  </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="Enclosures">
  </div>
  <h3 class="interestTitle">Enclosures</h3>
  <input type="checkbox" value="Enclosures" class="interestCheck">
</div>