jQuery复选框，如果语句不再起作用

问题描述

letterChr，numberChr和symbolChr最初被指定为id，但是在我需要第二组按钮（我在html和javascript上都做过）之后，不得不将它们最近更新为一个类，而每个变体都可以使用if语句来请将全局变量设置为4（不设置），而默认设置为3。将不胜感激。

javascript代码

var letterChr = $('.letters')
var numberChr = $('.numbers')
var symbolsChr = $('.characters')

function SelectorChr() {
  if (letterChr.is(':checked') && numberChr.is(':checked') && symbolsChr.is(':checked')) {
    chooser = 1
    console.log('checked')
  } else if (letterChr.is(':checked') && numberChr.is(':not(:checked)') && symbolsChr.is(':not(:checked)')) {
    chooser = 3
    console.log('checked 3')

  } else if (letterChr.is(':checked') && numberChr.is(':not(:checked)') && symbolsChr.is(':checked')) {
    chooser = 4
    console.log('checked 4')
  } else {
    chooser = 0
    alert('No checkboxes have been selected')
    return
  }
}

html代码

<ul class="list-group list-group-flush">
  <li class="list-group-item">
    <label for="letters">Letters</label>
    <input type="checkbox" class="letters">
  </li>
  <li class="list-group-item">
    <label for="numbers">Numbers</label>
    <input type="checkbox" class="numbers">
  </li>
  <li class="list-group-item">
    <label for="characters">Characters</label>
    <input type="checkbox" class="characters">
  </li>
</ul>

解决方法

我做了一个简单的html页面来测试您的代码，我发现您不应该使用numberChr.is（'：not（：checked）'），而应该使用！numberChr.is（'：已检查”）。请参见下面的代码示例。我认为这就是您想要的。

<ul class="list-group list-group-flush">
    <li class="list-group-item">
      <label for="letters">Letters</label>
      <input type="checkbox" class="letters">
    </li>
    <li class="list-group-item">
      <label for="numbers">Numbers</label>
      <input type="checkbox" class="numbers">
    </li>
    <li class="list-group-item">
      <label for="characters">Characters</label>
      <input type="checkbox" class="characters">
    </li>
  </ul>
  <script type="text/javascript">
        var letterChr = $('.letters')
        var numberChr = $('.numbers')
        var symbolsChr = $('.characters')

        function SelectorChr(){
            if (letterChr.is(':checked') && numberChr.is(':checked') && symbolsChr.is(':checked')) {
                chooser = 1
                console.log('checked')
            } else if (letterChr.is(':checked') && !numberChr.is(':checked') && !symbolsChr.is(':checked')) {
                chooser = 3
                console.log('checked 3')

            } else if (letterChr.is(':checked') && !numberChr.is(':checked') && symbolsChr.is(':checked')) {
                chooser = 4
                console.log('checked 4')
            } else {
                chooser = 0
                alert('No checkboxes have been selected')
                return
            }
        }
  </script>

,

因此，问题似乎只在第二个按钮组停留的情况下才存在，并且仅在特定条件下为4。因此，我通过在document.ready函数之外添加元素remove函数并命名为day来解决了这个问题。 / p>

非常感谢大家对我的帮助，对此我深表感谢。