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