[英]jquery checkbox if statement not working anymore
letterChr, numberChr, and symbolChr were originally designated as ids but had to update them recently to a class after I needed second set of buttons (which I did on both the html and javascript) and while every variation works the if statement to set the global variable to 4 doesn't and it instead defaults to 3. any help would be appreciated. letterChr、numberChr 和 symbolChr 最初被指定为 id,但在我需要第二组按钮(我在 html 和 javascript 上都做了)并且每个变体都使用 if 语句来设置全局后,最近不得不将它们更新为一个类变量为 4 不是,而是默认为 3。任何帮助将不胜感激。
the javascript code 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
}
}
the html code 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>
I made a simple html page to test your code, and what I find is that you shouldn't use the numberChr.is(':not(:checked)') instead you should use !numberChr.is(':checked').我做了一个简单的 html 页面来测试你的代码,我发现你不应该使用 numberChr.is(':not(:checked)') 而是你应该使用 !numberChr.is(':checked') . see the code sample below.请参阅下面的代码示例。 I think this is what you were looking for.我想这就是你要找的。
<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>
so the problem only seems to persist as long as the second button set stays and only with the specific conditions of 4. So I resolved it by adding an element remove function outside the document.ready function and called it a day.因此,只要第二个按钮集保持不变,并且仅在 4 的特定条件下,问题似乎就会持续存在。所以我通过在 document.ready 函数之外添加一个元素删除函数来解决它,并称之为一天。
So thank you everyone for helping me out I greatly appreciated it.所以感谢大家帮助我,我非常感谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.