尝试使用推送功能获取复选框的值

Question

我试图从示例中的复选框中获取值。

我没有收到任何错误，所以我不知道我做错了什么。

我做错了什么？

var interest = $('.interest');
var checkVal = [];

interest.click(function() {
  $('.interestCheck', this).prop('checked', !$('.interestCheck', this).prop('checked'));
  var check = $('.interestCheck', this).val();
});
interest.change(function() {
  $('.interestCheck:checked').each(function() {
    checkVal.push($(this).val());
  });
});

var checkSelected;
checkSelected = checkVal.join(',');
console.log(checkSelected);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="interest">
  <h3 class="interestTitle">A</h3>
  <input type="checkbox" value="A" class="interestCheck">
</div>
<div class="interest">
  <h3 class="interestTitle">B</h3>
  <input type="checkbox" value="B" class="interestCheck">
</div>
<div class="interest">
  <h3 class="interestTitle">C</h3>
  <input type="checkbox" value="C" class="interestCheck">
</div>

var interest = $('.interest');
var check = [];
interest.click(function() {
  $('.interestCheck', this).prop('checked', !$('.interestCheck', this).prop('checked'));
  check = $('.interestCheck', this).val();
});
interest.change(function() {
  $('.interestCheck:checked').each(function() {
    check.push($(this).val());
  });
  var checkSelected;
  checkSelected = check.join(',');
  console.log(checkSelected);
});

更新：完整代码

var interest = $('.interest');
    //var checkVal = [];
    interest.click(function() {
        $('.interestCheck', this).prop('checked', !$('.interestCheck', this).prop('checked'));
        var check = $('.interestCheck', this).val();
        $('.interestBox', this).toggleClass('active');
    });
    var interestIn = $('.interest input');
    interestIn.change(function() {
        var checkVal = [];
        //$('.interestCheck:checked').each(function() {
        $('.interestCheck').is(':checked').each(function() {
            checkVal.push($(this).val());
            //var checkSelected;
        //checkSelected = checkVal.join(',');
        //console.log(checkSelected);
        console.log(checkVal.join(","));
        });
    });

HTML:

<div class="interest">
                        <div class="interestBox">
                            <img src="https://image.com" alt="Aluminum Profile Framing">
                        </div>
                        <h3 class="interestTitle">Aluminum Profile</h3>
                        <input type="checkbox" value="Aluminum Profile" class="interestCheck">
                    </div>

Answer 1

好的...如果"selected".

，您尝试使用复选框仅携带一个值

我建议您改用数据属性...并去掉复选框。
您可以使用 .data()

读取这些数据属性

var interest = $('.interest');

interest.click(function() {

  //The array to gather all data attribute values.
  var checkVal = [];
  
  // Toggle the active class.
  $(this).toggleClass('active');
  
  // Gather the values.
  interest.each(function(){
    if($(this).is(".active")){
      checkVal.push($(this).data("title"));
    }
  });
  console.log(checkVal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="interest" data-title="A">
  <img src="https://www.mountaineers.org/images/placeholder-images/placeholder-400-x-400/image_preview" alt="A">
  <h3 class="interestTitle">A</h3>
</div>
<div class="interest" data-title="B">
  <img src="https://www.mountaineers.org/images/placeholder-images/placeholder-400-x-400/image_preview" alt="B">
  <h3 class="interestTitle">B</h3>
</div>
<div class="interest" data-title="C">
  <img src="https://www.mountaineers.org/images/placeholder-images/placeholder-400-x-400/image_preview" alt="C">
  <h3 class="interestTitle">C</h3>
</div>

Answer 2

$('.interestCheck', this).prop('checked', !$('.interestCheck', this).prop('checked')) 不足以触发复选框上的 .change() 因此您需要将后者添加到前者：

我不知道这是否是您所需要的，请告诉我

var interest = $('.interest');
//var checkVal = [];
interest.click(function() {

  $('.interestCheck', this).prop('checked', !$('.interestCheck', this).prop('checked')).change();
  var check = $('.interestCheck', this).val();
  $('.interestBox', this).toggleClass('active');
  
});

var interestIn = $('.interest input');

interestIn.click(function(e){
  e.stopPropagation();
});
interestIn.change(function() {
  var checkVal = [];
  //$('.interestCheck:checked').each(function() {
  if($('.interestCheck:checked').length>0)
  $('.interestCheck:checked').each(function() {
    checkVal.push($(this).val());
    //var checkSelected;
    //checkSelected = checkVal.join(',');
    //console.log(checkSelected);
    console.log(checkVal.join(","));
  }); else console.log('NONE');
});

.interest input {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="interest">
  <div class="interestBox">
    <img src="https://www.mountaineers.org/images/placeholder-images/placeholder-400-x-400/image_preview" alt="Aluminum Profile Framing">
  </div>
  <h3 class="interestTitle">Aluminum Profile</h3>
  <input type="checkbox" value="Aluminum Profile" class="interestCheck">
</div>

尝试使用推送功能获取复选框的值

Attempting to use the push function to get values of checkboxes

javascript

jquery

push

click