2020年1月7日 00:49:32go评论69阅读模式

英文:

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.

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();
})

&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;

答案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;)

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();
})

&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;

答案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='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.

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);
});

&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;

答案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(&#39;termsChkbx&#39;); //Get the checkbox status
function checkStuff() {
if ($(checkbox2).prop(&#39;checked&#39;)) {
//Do Stuff
}
else {
//Do Stuff
}
}

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

答案1

答案2

答案3

答案4

配置 Rider 以调试 .Net 和 Angular。

PTV矢量地图文本标签未按预期显示。

HKDFExpand在NodeJS中

NodeJS 如何处理嵌套的 try/catch 机制

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论