尝试检查是否选中了任何事件复选框。

huangapple
go评论108阅读模式
英文:

Attempting to check if any of event checkboxes are checked

问题

当名称文本字段更改时，我想检查它是否包含文本，条款是否被接受，以及是否选中了一个或多个事件复选框。如果是这种情况，我希望提交按钮变为可用。

我被告知应该使用以下方式来检查事件复选框是否被选中：
document.querySelector('[name=event[]]:checked') !== null
然而，这是我无法使其正常工作的代码的唯一部分。

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. function checkStuff(){
  5.  if (document.getElementsByName("termsChkbx")[0].checked && document.getElementsByName("name")[0].value.length != 0 && document.querySelector('[name=event[]]:checked') !== null) {
  6.   document.getElementsByName("submit")[0].disabled = false;
  7. }
  8.   else{
  9.     document.getElementsByName("submit")[0].disabled = true;
  10.   }
  11. }
  13. document.getElementsByName("termsChkbx")[0].addEventListener('change', (event) => {
  14. checkStuff();
  15. })
  16. <!-- language: lang-html -->
  18. <form id="bookingForm" action="javascript:alert('form submitted');" method="get">
  19.   <section id="Events">
  20.     <h2>Select Events</h2>
  21.     <div class='item'>
  22.       <span class='eventTitle'>Event number 1</span>
  23.       <span class='eventPrice'>10.50</span>
  24.       <span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
  25.     </div>
  26.     <div class='item'>
  27.       <span class='eventTitle'>Event number 2</span>
  28.       <span class='eventPrice'>5.00</span>
  29.       <span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
  30.     </div>
  31.     <section id="Cost">
  32.       <input type="radio" name="delivery" value="ticket" data-price="10">
  33.       <h2>Total Price</h2>
  34.       Total Price <input type="text" name="total" size="12">
  35.       <p>Name<input type="text" name="name"></p>
  36.     </section>
  37.   <p>Terms & conditions<input type="checkbox" name="termsChkbx"></p>
  38.     <p><input type="submit" name="submit" value="Book" disabled></p>
  39.   </section>
  40. </form>
  42. <!-- 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(&#39;[name=event[]]:checked&#39;) !== 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 -->

  1. function checkStuff(){
  2. if (document.getElementsByName(&quot;termsChkbx&quot;)[0].checked &amp;&amp; document.getElementsByName(&quot;name&quot;)[0].value.length != 0 &amp;&amp; document.querySelector(&#39;[name=event[]]:checked&#39;) !== null) {
  3. document.getElementsByName(&quot;submit&quot;)[0].disabled = false;
  4. }
  5. else{
  6. document.getElementsByName(&quot;submit&quot;)[0].disabled = true;
  7. }
  8. }
  9. document.getElementsByName(&quot;termsChkbx&quot;)[0].addEventListener(&#39;change&#39;, (event) =&gt; {
  10. checkStuff();
  11. })

<!-- language: lang-html -->

  1. &lt;form id=&quot;bookingForm&quot; action=&quot;javascript:alert(&#39;form submitted&#39;);&quot; method=&quot;get&quot;&gt;
  2. &lt;section id=&quot;Events&quot;&gt;
  3. &lt;h2&gt;Select Events&lt;/h2&gt;
  4. &lt;div class=&#39;item&#39;&gt;
  5. &lt;span class=&#39;eventTitle&#39;&gt;Event number 1&lt;/span&gt;
  6. &lt;span class=&#39;eventPrice&#39;&gt;10.50&lt;/span&gt;
  7. &lt;span class=&#39;chosen&#39;&gt;&lt;input type=&#39;checkbox&#39; name=&#39;event[]&#39; value=&#39;1&#39; data-price=&#39;10.50&#39;&gt;&lt;/span&gt;
  8. &lt;/div&gt;
  9. &lt;div class=&#39;item&#39;&gt;
  10. &lt;span class=&#39;eventTitle&#39;&gt;Event number 2&lt;/span&gt;
  11. &lt;span class=&#39;eventPrice&#39;&gt;5.00&lt;/span&gt;
  12. &lt;span class=&#39;chosen&#39;&gt;&lt;input type=&#39;checkbox&#39; name=&#39;event[]&#39; value=&#39;2&#39; data-price=&#39;5.00&#39;&gt;&lt;/span&gt;
  13. &lt;/div&gt;
  14. &lt;section id=&quot;Cost&quot;&gt;
  15. &lt;input type=&quot;radio&quot; name=&quot;delivery&quot; value=&quot;ticket&quot; data-price=&quot;10&quot;&gt;
  16. &lt;h2&gt;Total Price&lt;/h2&gt;
  17. Total Price &lt;input type=&quot;text&quot; name=&quot;total&quot; size=&quot;12&quot;&gt;
  18. &lt;p&gt;Name&lt;input type=&quot;text&quot; name=&quot;name&quot;&gt;&lt;/p&gt;
  19. &lt;/section&gt;
  20. &lt;p&gt;Terms &amp; conditions&lt;input type=&quot;checkbox&quot; name=&quot;termsChkbx&quot;&gt;&lt;/p&gt;
  21. &lt;p&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Book&quot; disabled&gt;&lt;/p&gt;
  22. &lt;/section&gt;
  23. &lt;/form&gt;

<!-- end snippet -->

答案1

得分: 0

你的选择器不正确。你需要在属性选择器的值周围加上引号：

  1. document.querySelector('[name="event[]"]:checked')
  1. <input type="checkbox" name="event[]" value="1" data-price="10.50">
  2. <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 :

  1. document.querySelector(&#39;[name=&quot;event[]&quot;]:checked&#39;)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function checkStuff(){
  2. if (document.getElementsByName(&quot;termsChkbx&quot;)[0].checked &amp;&amp; document.getElementsByName(&quot;name&quot;)[0].value.length != 0 &amp;&amp; document.querySelector(&#39;[name=&quot;event[]&quot;]:checked&#39;) !== null) {
  3. document.getElementsByName(&quot;submit&quot;)[0].disabled = false;
  4. }
  5. else{
  6. document.getElementsByName(&quot;submit&quot;)[0].disabled = true;
  7. }
  8. }
  9. document.getElementsByName(&quot;termsChkbx&quot;)[0].addEventListener(&#39;change&#39;, (event) =&gt; {
  10. checkStuff();
  11. })

<!-- language: lang-html -->

  1. &lt;form id=&quot;bookingForm&quot; action=&quot;javascript:alert(&#39;form submitted&#39;);&quot; method=&quot;get&quot;&gt;
  2. &lt;section id=&quot;Events&quot;&gt;
  3. &lt;h2&gt;Select Events&lt;/h2&gt;
  4. &lt;div class=&#39;item&#39;&gt;
  5. &lt;span class=&#39;eventTitle&#39;&gt;Event number 1&lt;/span&gt;
  6. &lt;span class=&#39;eventPrice&#39;&gt;10.50&lt;/span&gt;
  7. &lt;span class=&#39;chosen&#39;&gt;&lt;input type=&#39;checkbox&#39; name=&#39;event[]&#39; value=&#39;1&#39; data-price=&#39;10.50&#39;&gt;&lt;/span&gt;
  8. &lt;/div&gt;
  9. &lt;div class=&#39;item&#39;&gt;
  10. &lt;span class=&#39;eventTitle&#39;&gt;Event number 2&lt;/span&gt;
  11. &lt;span class=&#39;eventPrice&#39;&gt;5.00&lt;/span&gt;
  12. &lt;span class=&#39;chosen&#39;&gt;&lt;input type=&#39;checkbox&#39; name=&#39;event[]&#39; value=&#39;2&#39; data-price=&#39;5.00&#39;&gt;&lt;/span&gt;
  13. &lt;/div&gt;
  14. &lt;section id=&quot;Cost&quot;&gt;
  15. &lt;input type=&quot;radio&quot; name=&quot;delivery&quot; value=&quot;ticket&quot; data-price=&quot;10&quot;&gt;
  16. &lt;h2&gt;Total Price&lt;/h2&gt;
  17. Total Price &lt;input type=&quot;text&quot; name=&quot;total&quot; size=&quot;12&quot;&gt;
  18. &lt;p&gt;Name&lt;input type=&quot;text&quot; name=&quot;name&quot;&gt;&lt;/p&gt;
  19. &lt;/section&gt;
  20. &lt;p&gt;Terms &amp; conditions&lt;input type=&quot;checkbox&quot; name=&quot;termsChkbx&quot;&gt;&lt;/p&gt;
  21. &lt;p&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Book&quot; disabled&gt;&lt;/p&gt;
  22. &lt;/section&gt;
  23. &lt;/form&gt;

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

  1. &lt;input type=&#39;checkbox&#39; name=&#39;event&#39; value=&#39;2&#39; data-price=&#39;5.00&#39;&gt;

You'll also need to modify your javascript

  1. document.querySelector(&#39;[name=event]:checked&#39;)

https://codepen.io/orunnals/pen/XWJVqVv

答案3

得分: 0

以下是您要翻译的内容：

您可以使用 some 来查看是否选中了具有 name=&#39;event[]&#39; 的任何一个输入，以及是否选中了具有名称 termsChkbx 的输入。

  1. function checkStuff(){
  2.     const submit = document.querySelector('input[type="submit"]');
  3.     const isChecked = [...document.querySelectorAll('[name=\'event[]\']')].some(e => e.checked) && document.querySelector('[name="termsChkbx"]').checked;
  4.     submit.disabled = !isChecked;
  5. };
  7. document.querySelectorAll('input[type="checkbox"]')
  8.    .forEach(checkbox => {
  9.         checkbox.addEventListener('change', checkStuff);
  10.    });
  1. <form id="bookingForm" action="javascript:alert('form submitted');" method="get">
  2.     <section id="Events">
  3.       <h2>Select Events</h2>
  4.       <div class='item'>
  5.         <span class='eventTitle'>Event number 1</span>
  6.         <span class='eventPrice'>10.50</span>
  7.         <span class='chosen'><input type='checkbox' name='event[]' value='1' data-price='10.50'></span>
  8.       </div>
  9.       <div class='item'>
  10.         <span class='eventTitle'>Event number 2</span>
  11.         <span class='eventPrice'>5.00</span>
  12.         <span class='chosen'><input type='checkbox' name='event[]' value='2' data-price='5.00'></span>
  13.       </div>
  14.       <section id="Cost">
  15.         <input type="radio" name="delivery" value="ticket" data-price="10">
  16.         <h2>Total Price</h2>
  17.         Total Price <input type="text" name="total" size="12">
  18.         <p>Name<input type="text" name="name"></p>
  19.       </section>
  20.     <p>Terms & conditions<input type="checkbox" name="termsChkbx"></p>
  21.       <p><input type="submit" name="submit" value="Book" disabled></p>
  22.     </section>
  23.   </form>

请注意，我已经移除了代码部分，只返回翻译好的内容。如果您需要进一步的翻译或帮助，请告诉我。

英文:

You can use some to see if any one of input with name=&#39;event[]&#39; is checked and input with name termsChkbx are checked.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function checkStuff(){
  2. const submit = document.querySelector(&#39;input[type=&quot;submit&quot;]&#39;);
  3. const isChecked = [...document.querySelectorAll(&quot;[name=&#39;event[]&#39;&quot;)].some(e =&gt; e.checked) &amp;&amp; document.querySelector(&#39;[name=&quot;termsChkbx&quot;&#39;).checked;
  4. submit.disabled = !isChecked;
  5. };
  6. document.querySelectorAll(&#39;input[type=&quot;checkbox&quot;]&#39;)
  7. .forEach(checkbox =&gt; {
  8. checkbox.addEventListener(&#39;change&#39;, checkStuff);
  9. });

<!-- language: lang-html -->

  1. &lt;form id=&quot;bookingForm&quot; action=&quot;javascript:alert(&#39;form submitted&#39;);&quot; method=&quot;get&quot;&gt;
  2. &lt;section id=&quot;Events&quot;&gt;
  3. &lt;h2&gt;Select Events&lt;/h2&gt;
  4. &lt;div class=&#39;item&#39;&gt;
  5. &lt;span class=&#39;eventTitle&#39;&gt;Event number 1&lt;/span&gt;
  6. &lt;span class=&#39;eventPrice&#39;&gt;10.50&lt;/span&gt;
  7. &lt;span class=&#39;chosen&#39;&gt;&lt;input type=&#39;checkbox&#39; name=&#39;event[]&#39; value=&#39;1&#39; data-price=&#39;10.50&#39;&gt;&lt;/span&gt;
  8. &lt;/div&gt;
  9. &lt;div class=&#39;item&#39;&gt;
  10. &lt;span class=&#39;eventTitle&#39;&gt;Event number 2&lt;/span&gt;
  11. &lt;span class=&#39;eventPrice&#39;&gt;5.00&lt;/span&gt;
  12. &lt;span class=&#39;chosen&#39;&gt;&lt;input type=&#39;checkbox&#39; name=&#39;event[]&#39; value=&#39;2&#39; data-price=&#39;5.00&#39;&gt;&lt;/span&gt;
  13. &lt;/div&gt;
  14. &lt;section id=&quot;Cost&quot;&gt;
  15. &lt;input type=&quot;radio&quot; name=&quot;delivery&quot; value=&quot;ticket&quot; data-price=&quot;10&quot;&gt;
  16. &lt;h2&gt;Total Price&lt;/h2&gt;
  17. Total Price &lt;input type=&quot;text&quot; name=&quot;total&quot; size=&quot;12&quot;&gt;
  18. &lt;p&gt;Name&lt;input type=&quot;text&quot; name=&quot;name&quot;&gt;&lt;/p&gt;
  19. &lt;/section&gt;
  20. &lt;p&gt;Terms &amp; conditions&lt;input type=&quot;checkbox&quot; name=&quot;termsChkbx&quot;&gt;&lt;/p&gt;
  21. &lt;p&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Book&quot; disabled&gt;&lt;/p&gt;
  22. &lt;/section&gt;
  23. &lt;/form&gt;

<!-- end snippet -->

答案4

得分: -1

以下是翻译好的内容：

JavaScript代码如下：

  1. var checkbox2 = document.getElementByName('termsChkbx'); //获取复选框状态
  3. function checkStuff() {
  5. 	if ($(checkbox2).prop('checked')) {
  6. 		//执行某些操作
  7. 	}
  9. 	else {
  10. 		//执行某些操作
  11. 	}
  13. }

请注意，我已经将HTML中的&#39;字符替换为正常的单引号。

英文:

The js would look like this

  1. var checkbox2 = document.getElementByName(&#39;termsChkbx&#39;); //Get the checkbox status
  2. function checkStuff() {
  3. if ($(checkbox2).prop(&#39;checked&#39;)) {
  4. //Do Stuff
  5. }
  6. else {
  7. //Do Stuff
  8. }
  9. }

huangapple
  • 本文由 发表于 2020年1月7日 00:49:32
  • 转载请务必保留本文链接：https://go.coder-hub.com/59615958.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定