Jquery Javascript复选框选择/取消选择

Question

我有一个HTML表单，里面有一堆复选框。

我想要做的就是这个。 - 如果选中任何一个复选框，我想在javascript中设置一个变量。 - 如果未选择任何内容，我想将该变量设置为空白。 - 我也在切换复选框的类。

这就是我目前正在做的事情。

var checklist = "";
$('.form3 :checkbox').change(function() {           
    $(this).closest('label').toggleClass("checkselected", this.checked);
    if(window.checklist != "OL" )
    {
        window.checklist = "OL";
    }

});

此代码的问题是，如果一旦设置了变量，我不确定如何清除它是用户取消选择所有复选框，并且不再选择任何框。

有什么建议吗？ （我正在使用jQuery）

Answer 1

您可能想检查所选复选框的数量..这样，您就不会有问题。 （嗯，如果“OL”没有任何意义......）

var checklist = "";
var checkboxes = $('.form3 :checkbox');
checkboxes.change(function() {           
    $(this).closest('label').toggleClass("checkselected", this.checked);
    checklist = checkboxes.filter(':checked').length;
    // checklist would then be 0 if none selected.
});

Answer 2

要选中您可以使用的所有复选框

$('.form3 :checkbox").attr("checked", true);

取消选择

$('.form3 :checkbox").attr("checked", false);

Answer 3

以下代码是您所需要的：

<html>
<body>
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <style>
  .checkselected { color: red; }
  </style>
  <div class="form3">
    <label><input type="checkbox" />Option 1</label>
    <label><input type="checkbox" />Option 2</label>
    <label><input type="checkbox" />Option 3</label>
  </div>
  <script>
var checklist = "";
$('.form3 :checkbox').change(function() {           
    $(this).closest('label').toggleClass("checkselected", this.checked);
    if(window.checklist != "OL" )
    {
        window.checklist = "OL";
    }
    var size = $('.form3 :checkbox').length;
    var found = false;
    $('.form3 :checkbox').each(function(index) {
      if (this.checked) {
        found = true;
      }
      if (index == size - 1) {
        if (!found) {
          checklist = '';
        }
      }
    });
    alert(checklist);
});
  </script>
</body>
</html>

Jquery Javascript复选框选择/取消选择

问题描述

3 个解决方案

解决方案1
2 已采纳 2011-10-12 04:03:29

解决方案2
0 2011-10-12 04:04:13

解决方案3
0 2011-10-12 04:18:34

Jquery Javascript复选框选择/取消选择

问题描述

3 个解决方案

解决方案1 2 已采纳 2011-10-12 04:03:29

解决方案2 0 2011-10-12 04:04:13

解决方案3 0 2011-10-12 04:18:34

解决方案1
2 已采纳 2011-10-12 04:03:29

解决方案2
0 2011-10-12 04:04:13

解决方案3
0 2011-10-12 04:18:34