英文:
Attempting to check if any of event checkboxes are checked
问题
当名称文本字段更改时，我想检查它是否包含文本，条款是否被接受，以及是否选中了一个或多个事件复选框。如果是这种情况，我希望提交按钮变为可用。
我被告知应该使用以下方式来检查事件复选框是否被选中：
document.querySelector('[name=event[]]:checked') !== null
然而，这是我无法使其正常工作的代码的唯一部分。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function checkStuff(){
if (document.getElementsByName("termsChkbx")[0].checked && document.getElementsByName("name")[0].value.length != 0 && document.querySelector('[name=event[]]:checked') !== null) {
document.getElementsByName("submit")[0].disabled = false;
}
else{
document.getElementsByName("submit")[0].disabled = true;
}
}
document.getElementsByName("termsChkbx")[0].addEventListener('change', (event) => {
checkStuff();
})
<!-- language: lang-html -->
<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
<section id="Events">
<h2>Select Events</h2>
<div class='item'>
<span class='eventTitle'>Event number 1</span>
<span class='eventPrice'>10.50</span>
<span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
</div>
<div class='item'>
<span class='eventTitle'>Event number 2</span>
<span class='eventPrice'>5.00</span>
<span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
</div>
<section id="Cost">
<input type="radio" name="delivery" value="ticket" data-price="10">
<h2>Total Price</h2>
Total Price <input type="text" name="total" size="12">
<p>Name<input type="text" name="name"></p>
</section>
<p>Terms & conditions<input type="checkbox" name="termsChkbx"></p>
<p><input type="submit" name="submit" value="Book" disabled></p>
</section>
</form>
<!-- end snippet -->
注意：这是您提供的代码，我已经移除了不需要翻译的部分。
英文:
When the name text field is changed I want to check if it contains text, the terms are accepted and 1 or more events checkbox is checked. If this is the case I want the submit button to become enabled.
I was told that this document.querySelector('[name=event[]]:checked') !== null is the way I should check if an event checkbox is checked, however, it is the only part of the code I can't get to work.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function checkStuff(){
if (document.getElementsByName("termsChkbx")[0].checked && document.getElementsByName("name")[0].value.length != 0 && document.querySelector('[name=event[]]:checked') !== null) {
document.getElementsByName("submit")[0].disabled = false;
}
else{
document.getElementsByName("submit")[0].disabled = true;
}
}
document.getElementsByName("termsChkbx")[0].addEventListener('change', (event) => {
checkStuff();
})
<!-- language: lang-html -->
<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
<section id="Events">
<h2>Select Events</h2>
<div class='item'>
<span class='eventTitle'>Event number 1</span>
<span class='eventPrice'>10.50</span>
<span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
</div>
<div class='item'>
<span class='eventTitle'>Event number 2</span>
<span class='eventPrice'>5.00</span>
<span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
</div>
<section id="Cost">
<input type="radio" name="delivery" value="ticket" data-price="10">
<h2>Total Price</h2>
Total Price <input type="text" name="total" size="12">
<p>Name<input type="text" name="name"></p>
</section>
<p>Terms & conditions<input type="checkbox" name="termsChkbx"></p>
<p><input type="submit" name="submit" value="Book" disabled></p>
</section>
</form>
<!-- end snippet -->
答案1
得分: 0
你的选择器不正确。你需要在属性选择器的值周围加上引号：
document.querySelector('[name="event[]"]:checked')
<input type="checkbox" name="event[]" value="1" data-price="10.50">
<input type="checkbox" name="event[]" value="2" data-price="5.00">
英文:
Your selector is not right. You need to add quote around the value of your attribute selector :
document.querySelector('[name="event[]"]:checked')
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function checkStuff(){
if (document.getElementsByName("termsChkbx")[0].checked && document.getElementsByName("name")[0].value.length != 0 && document.querySelector('[name="event[]"]:checked') !== null) {
document.getElementsByName("submit")[0].disabled = false;
}
else{
document.getElementsByName("submit")[0].disabled = true;
}
}
document.getElementsByName("termsChkbx")[0].addEventListener('change', (event) => {
checkStuff();
})
<!-- language: lang-html -->
<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
<section id="Events">
<h2>Select Events</h2>
<div class='item'>
<span class='eventTitle'>Event number 1</span>
<span class='eventPrice'>10.50</span>
<span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
</div>
<div class='item'>
<span class='eventTitle'>Event number 2</span>
<span class='eventPrice'>5.00</span>
<span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
</div>
<section id="Cost">
<input type="radio" name="delivery" value="ticket" data-price="10">
<h2>Total Price</h2>
Total Price <input type="text" name="total" size="12">
<p>Name<input type="text" name="name"></p>
</section>
<p>Terms & conditions<input type="checkbox" name="termsChkbx"></p>
<p><input type="submit" name="submit" value="Book" disabled></p>
</section>
</form>
<!-- end snippet -->
答案2
得分: 0
你应该尝试从复选框的name属性中移除[]。这可能会影响你的逻辑。
你还需要修改你的JavaScript。
document.querySelector('[name=event]:checked')
https://codepen.io/orunnals/pen/XWJVqVv
英文:
You should try removing the [] from the name attribute of your checkboxes. That might be messing up your logic.
<input type='checkbox' name='event' value='2' data-price='5.00'>
You'll also need to modify your javascript
document.querySelector('[name=event]:checked')
答案3
得分: 0
以下是您要翻译的内容：
您可以使用 some 来查看是否选中了具有 name='event[]' 的任何一个输入，以及是否选中了具有名称 termsChkbx 的输入。
function checkStuff(){
const submit = document.querySelector('input[type="submit"]');
const isChecked = [...document.querySelectorAll('[name=\'event[]\']')].some(e => e.checked) && document.querySelector('[name="termsChkbx"]').checked;
submit.disabled = !isChecked;
};
document.querySelectorAll('input[type="checkbox"]')
.forEach(checkbox => {
checkbox.addEventListener('change', checkStuff);
});
<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
<section id="Events">
<h2>Select Events</h2>
<div class='item'>
<span class='eventTitle'>Event number 1</span>
<span class='eventPrice'>10.50</span>
<span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
</div>
<div class='item'>
<span class='eventTitle'>Event number 2</span>
<span class='eventPrice'>5.00</span>
<span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
</div>
<section id="Cost">
<input type="radio" name="delivery" value="ticket" data-price="10">
<h2>Total Price</h2>
Total Price <input type="text" name="total" size="12">
<p>Name<input type="text" name="name"></p>
</section>
<p>Terms & conditions<input type="checkbox" name="termsChkbx"></p>
<p><input type="submit" name="submit" value="Book" disabled></p>
</section>
</form>
请注意，我已经移除了代码部分，只返回翻译好的内容。如果您需要进一步的翻译或帮助，请告诉我。
英文:
You can use some to see if any one of input with name='event[]' is checked and input with name termsChkbx are checked.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function checkStuff(){
const submit = document.querySelector('input[type="submit"]');
const isChecked = [...document.querySelectorAll("[name='event[]'")].some(e => e.checked) && document.querySelector('[name="termsChkbx"').checked;
submit.disabled = !isChecked;
};
document.querySelectorAll('input[type="checkbox"]')
.forEach(checkbox => {
checkbox.addEventListener('change', checkStuff);
});
<!-- language: lang-html -->
<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
<section id="Events">
<h2>Select Events</h2>
<div class='item'>
<span class='eventTitle'>Event number 1</span>
<span class='eventPrice'>10.50</span>
<span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
</div>
<div class='item'>
<span class='eventTitle'>Event number 2</span>
<span class='eventPrice'>5.00</span>
<span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
</div>
<section id="Cost">
<input type="radio" name="delivery" value="ticket" data-price="10">
<h2>Total Price</h2>
Total Price <input type="text" name="total" size="12">
<p>Name<input type="text" name="name"></p>
</section>
<p>Terms & conditions<input type="checkbox" name="termsChkbx"></p>
<p><input type="submit" name="submit" value="Book" disabled></p>
</section>
</form>
<!-- end snippet -->
答案4
得分: -1
以下是翻译好的内容：
JavaScript代码如下：
var checkbox2 = document.getElementByName('termsChkbx'); //获取复选框状态
function checkStuff() {
if ($(checkbox2).prop('checked')) {
//执行某些操作
}
else {
//执行某些操作
}
}
请注意，我已经将HTML中的'字符替换为正常的单引号。
英文:
The js would look like this
var checkbox2 = document.getElementByName('termsChkbx'); //Get the checkbox status
function checkStuff() {
if ($(checkbox2).prop('checked')) {
//Do Stuff
}
else {
//Do Stuff
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论