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

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

javascript jquery

Jquery Javascript复选框选择/取消选择,javascript,jquery,Javascript,Jquery,我有一个HTML表单，里面有一堆复选框我想做的就是这样。 -如果选中任何一个复选框，我想在javascript中设置一个变量。 -如果未选择任何内容，我希望将该变量设置为空。 -我也在切换复选框的类我现在就是这样做的 var checklist = ""; $('.form3 :checkbox').change(function() { $(this).closest('label').toggleClass("checkselected", this.che

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

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

我现在就是这样做的

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

});

这段代码的问题是，一旦设置了变量，我不知道如何清除它，因为用户取消选择了所有复选框，并且不再选择任何复选框

有什么建议吗？

（我正在使用jQuery）

您可能需要检查所选复选框的数量。。这样，你就不会有问题了。（好吧，如果“OL”没有任何意义……）

选择所有可使用的复选框

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

取消选择

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

以下代码是您需要的：

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


.checkselected{颜色：红色；}
选择1
选择2
选择3
var检查表=”；
$（'.form3:checkbox'）.change（function（）{
$（this.closest（'label'）.toggleClass（“选中选中”，this.checked）；
如果（窗口检查表！=“OL”）
{
window.checklist=“OL”；
}
变量大小=$（'.form3:checkbox'）。长度；
var=false；
$（'.form3:checkbox'）。每个（函数（索引）{
如果（选中此项）{
发现=真；
}
如果（索引==大小-1）{
如果（！找到）{
检查表=“”；
}
}
});
警报（检查表）；
});

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