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

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

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(&#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 -->

function checkStuff(){
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) {
document.getElementsByName(&quot;submit&quot;)[0].disabled = false;
}
else{
document.getElementsByName(&quot;submit&quot;)[0].disabled = true;
}
}
document.getElementsByName(&quot;termsChkbx&quot;)[0].addEventListener(&#39;change&#39;, (event) =&gt; {
checkStuff();
})

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

&lt;form id=&quot;bookingForm&quot; action=&quot;javascript:alert(&#39;form submitted&#39;);&quot; method=&quot;get&quot;&gt;
&lt;section id=&quot;Events&quot;&gt;
&lt;h2&gt;Select Events&lt;/h2&gt;
&lt;div class=&#39;item&#39;&gt;
&lt;span class=&#39;eventTitle&#39;&gt;Event number 1&lt;/span&gt;
&lt;span class=&#39;eventPrice&#39;&gt;10.50&lt;/span&gt;
&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;
&lt;/div&gt;
&lt;div class=&#39;item&#39;&gt;
&lt;span class=&#39;eventTitle&#39;&gt;Event number 2&lt;/span&gt;
&lt;span class=&#39;eventPrice&#39;&gt;5.00&lt;/span&gt;
&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;
&lt;/div&gt;
&lt;section id=&quot;Cost&quot;&gt;
&lt;input type=&quot;radio&quot; name=&quot;delivery&quot; value=&quot;ticket&quot; data-price=&quot;10&quot;&gt;
&lt;h2&gt;Total Price&lt;/h2&gt;
Total Price &lt;input type=&quot;text&quot; name=&quot;total&quot; size=&quot;12&quot;&gt;
&lt;p&gt;Name&lt;input type=&quot;text&quot; name=&quot;name&quot;&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;p&gt;Terms &amp; conditions&lt;input type=&quot;checkbox&quot; name=&quot;termsChkbx&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Book&quot; disabled&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;/form&gt;

<!-- 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(&#39;[name=&quot;event[]&quot;]:checked&#39;)

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

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

function checkStuff(){
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) {
document.getElementsByName(&quot;submit&quot;)[0].disabled = false;
}
else{
document.getElementsByName(&quot;submit&quot;)[0].disabled = true;
}
}
document.getElementsByName(&quot;termsChkbx&quot;)[0].addEventListener(&#39;change&#39;, (event) =&gt; {
checkStuff();
})

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

&lt;form id=&quot;bookingForm&quot; action=&quot;javascript:alert(&#39;form submitted&#39;);&quot; method=&quot;get&quot;&gt;
&lt;section id=&quot;Events&quot;&gt;
&lt;h2&gt;Select Events&lt;/h2&gt;
&lt;div class=&#39;item&#39;&gt;
&lt;span class=&#39;eventTitle&#39;&gt;Event number 1&lt;/span&gt;
&lt;span class=&#39;eventPrice&#39;&gt;10.50&lt;/span&gt;
&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;
&lt;/div&gt;
&lt;div class=&#39;item&#39;&gt;
&lt;span class=&#39;eventTitle&#39;&gt;Event number 2&lt;/span&gt;
&lt;span class=&#39;eventPrice&#39;&gt;5.00&lt;/span&gt;
&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;
&lt;/div&gt;
&lt;section id=&quot;Cost&quot;&gt;
&lt;input type=&quot;radio&quot; name=&quot;delivery&quot; value=&quot;ticket&quot; data-price=&quot;10&quot;&gt;
&lt;h2&gt;Total Price&lt;/h2&gt;
Total Price &lt;input type=&quot;text&quot; name=&quot;total&quot; size=&quot;12&quot;&gt;
&lt;p&gt;Name&lt;input type=&quot;text&quot; name=&quot;name&quot;&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;p&gt;Terms &amp; conditions&lt;input type=&quot;checkbox&quot; name=&quot;termsChkbx&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Book&quot; disabled&gt;&lt;/p&gt;
&lt;/section&gt;
&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.

&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

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

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

答案3

得分: 0

以下是您要翻译的内容:

您可以使用 some 来查看是否选中了具有 name=&#39;event[]&#39; 的任何一个输入,以及是否选中了具有名称 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=&#39;event[]&#39; 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(&#39;input[type=&quot;submit&quot;]&#39;);
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;
submit.disabled = !isChecked;
};
document.querySelectorAll(&#39;input[type=&quot;checkbox&quot;]&#39;)
.forEach(checkbox =&gt; {
checkbox.addEventListener(&#39;change&#39;, checkStuff);
});

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

&lt;form id=&quot;bookingForm&quot; action=&quot;javascript:alert(&#39;form submitted&#39;);&quot; method=&quot;get&quot;&gt;
&lt;section id=&quot;Events&quot;&gt;
&lt;h2&gt;Select Events&lt;/h2&gt;
&lt;div class=&#39;item&#39;&gt;
&lt;span class=&#39;eventTitle&#39;&gt;Event number 1&lt;/span&gt;
&lt;span class=&#39;eventPrice&#39;&gt;10.50&lt;/span&gt;
&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;
&lt;/div&gt;
&lt;div class=&#39;item&#39;&gt;
&lt;span class=&#39;eventTitle&#39;&gt;Event number 2&lt;/span&gt;
&lt;span class=&#39;eventPrice&#39;&gt;5.00&lt;/span&gt;
&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;
&lt;/div&gt;
&lt;section id=&quot;Cost&quot;&gt;
&lt;input type=&quot;radio&quot; name=&quot;delivery&quot; value=&quot;ticket&quot; data-price=&quot;10&quot;&gt;
&lt;h2&gt;Total Price&lt;/h2&gt;
Total Price &lt;input type=&quot;text&quot; name=&quot;total&quot; size=&quot;12&quot;&gt;
&lt;p&gt;Name&lt;input type=&quot;text&quot; name=&quot;name&quot;&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;p&gt;Terms &amp; conditions&lt;input type=&quot;checkbox&quot; name=&quot;termsChkbx&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Book&quot; disabled&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;/form&gt;

<!-- end snippet -->

答案4

得分: -1

以下是翻译好的内容:

JavaScript代码如下:

var checkbox2 = document.getElementByName('termsChkbx'); //获取复选框状态

function checkStuff() {

	if ($(checkbox2).prop('checked')) {
		//执行某些操作
	}

	else {
		//执行某些操作
	}

}

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

英文:

The js would look like this

var checkbox2 = document.getElementByName(&#39;termsChkbx&#39;); //Get the checkbox status
function checkStuff() {
if ($(checkbox2).prop(&#39;checked&#39;)) {
//Do Stuff
}
else {
//Do Stuff
}
}

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

发表评论

匿名网友

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

确定