检查 JavaScript 中是否选择了两个框。

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

Checking if two boxes are selected in Javascript

问题

这是您提供的代码，以下是代码的翻译部分：

  1. 我正在尝试构建一个测试网站，基本上是这样说的：如果您选择花生复选框，这是一个不含花生的网站。如果您选择腰果，这是一个不含腰果的网站。如果您选择两者，这是一个不含花生和腰果的网站。 （将来，我还会添加其他食物的复选框，然后进行各种组合）但是，我在最后一部分遇到了问题 - 尝试在同时选择两个复选框时返回唯一的信息。
  3. 这是我编写的代码。没有最后的else if语句，它是有效的。但是我不确定最后的else if应该做什么才能使它完全运行。感谢任何指导！
  5. <!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
  7. <!-- 语言：lang-js -->
  9.     function myFunction() {
  10.         if (document.getElementById("peanuts").checked) {
  11.             document.write(
  12.                 "<p>您已选择花生。这是一个不含花生的食谱："
  13.             );
  14.         } else if (document.getElementById("cashews").checked) {
  15.             document.write(
  16.                 "<p>您已选择腰果。这是一个不含腰果的食谱："
  17.             );
  18.         } else if (document.getElementById("dairy").checked) {
  19.             document.write(
  20.                 "<p>您已选择乳制品。这是一个不含乳制品的食谱："
  21.             );
  22.         } else if (
  23.             document.getElementById("peanuts").checked &&
  24.             document.getElementById("cashews").checked
  25.         ) {
  26.             document.write("<p>您已选择两者。这是一个不含坚果的食谱：");
  27.         }
  28.     }
  30. <!-- 语言：lang-html -->
  32.     <input type="checkbox" name="peanuts" id="peanuts" />花生<br />
  33.     <input type="checkbox" name="cashews" id="cashews" />腰果<br />
  34.     <input type="checkbox" name="dairy" id="dairy" />乳制品<br />
  35.     <button id="myButton" type="button" value="getValue" onclick="myFunction()">
  36.         获取数值
  37.     </button>
  39. <!-- 结束代码片段 -->

请注意，这是代码的翻译部分，不包括问题的回答。如果您有任何其他问题或需要进一步的协助，请随时提出。

英文:

I'm trying to build out a test website that basically says: if you select the peanuts checkbox, here's a peanut free website. If you select cashews, here's a cashew free website. If you select both, here's a peanut and cashew free website. (In the future, I would add other checkboxes as well for other foods, and then do various combinations) I'm getting stuck on the last part, however - trying to return unique info if both checkboxes are selected.

Here's the code I put together. Without the last else if statement, it works. But I'm not sure what I need to do with the last else if to make it function fully. Appreciate any guidance here!

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

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

  1. function myFunction() {
  2.     if (document.getElementById(&quot;peanuts&quot;).checked) {
  3.         document.write(
  4.             &quot;&lt;p&gt; You have selected Peanuts. Here&#39;s a peanut-free recipe:&quot;
  5.         );
  6.     } else if (document.getElementById(&quot;cashews&quot;).checked) {
  7.         document.write(
  8.             &quot;&lt;p&gt; You have selected Cashews. Here&#39;s a cashew-free recipe:&quot;
  9.         );
  10.     } else if (document.getElementById(&quot;dairy&quot;).checked) {
  11.         document.write(
  12.             &quot;&lt;p&gt; You have selected Dairy. Here&#39;s a dairy-free recipe:&quot;
  13.         );
  14.     } else if (
  15.         document.getElementById(&quot;peanuts&quot;).checked &amp;&amp;
  16.         document.getElementById(&quot;cashews&quot;).checked
  17.     ) {
  18.         document.write(&quot;&lt;p&gt; You have selected Both. Here&#39;s a nut-free recipe:&quot;);
  19.     }
  20. }

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

  1. &lt;input type=&quot;checkbox&quot; name=&quot;peanuts&quot; id=&quot;peanuts&quot; /&gt;Peanuts&lt;br /&gt;
  3. &lt;input type=&quot;checkbox&quot; name=&quot;cashews&quot; id=&quot;cashews&quot; /&gt;Cashews&lt;br /&gt;
  5. &lt;input type=&quot;checkbox&quot; name=&quot;dairy&quot; id=&quot;dairy&quot; /&gt;Dairy&lt;br /&gt;
  7. &lt;button id=&quot;myButton&quot; type=&quot;button&quot; value=&quot;getValue&quot; onclick=&quot;myFunction()&quot;&gt;
  8.     Get Value
  9. &lt;/button&gt;

<!-- end snippet -->

答案1

得分: 0

将if条件写在"checked"的值上，我们可以将其存储在一个变量中。
将所有的.checked()值存储在一个变量中。
然后检查是否有任何两个值的组合为true。
如果需要代码，请告诉我。

英文:

instead of writing the if condition on the value of checked, we can store it in a variable.
Store all the .checked() values in a variable.
Then check if any combination of two values are true.

Let me know if you need the code for it.

答案2

得分: 0

这是因为执行顺序只需反转：

  1. function myFunction() {
  2.     if (
  3.         document.getElementById("peanuts").checked &&
  4.         document.getElementById("cashews").checked
  5.     ) {
  6.         document.write("<p>你选择了两者。这里有一个无坚果的食谱：");
  7.     } else if (document.getElementById("peanuts").checked) {
  8.         document.write(
  9.             "<p>你选择了花生。这里有一个无花生的食谱："
  10.         );
  11.     } else if (document.getElementById("cashews").checked) {
  12.         document.write(
  13.             "<p>你选择了腰果。这里有一个无腰果的食谱："
  14.         );
  15.     } else if (document.getElementById("dairy").checked) {
  16.         document.write(
  17.             "<p>你选择了乳制品。这里有一个无乳制品的食谱："
  18.         );
  19.     }
  20. }

这段代码未经过优化。

英文:

this is because the order of execution just needs to be reversed:

  1. function myFunction() {
  2.     if (
  3.         document.getElementById(&quot;peanuts&quot;).checked &amp;&amp;
  4.         document.getElementById(&quot;cashews&quot;).checked
  5.     ) {
  6.         document.write(&quot;&lt;p&gt; You have selected Both. Here&#39;s a nut-free recipe:&quot;);
  7.     } else if (document.getElementById(&quot;peanuts&quot;).checked) {
  8.         document.write(
  9.             &quot;&lt;p&gt; You have selected Peanuts. Here&#39;s a peanut-free recipe:&quot;
  10.         );
  11.     } else if (document.getElementById(&quot;cashews&quot;).checked) {
  12.         document.write(
  13.             &quot;&lt;p&gt; You have selected Cashews. Here&#39;s a cashew-free recipe:&quot;
  14.         );
  15.     } else if (document.getElementById(&quot;dairy&quot;).checked) {
  16.         document.write(
  17.             &quot;&lt;p&gt; You have selected Dairy. Here&#39;s a dairy-free recipe:&quot;
  18.         );
  19.     }
  20. }

> this code is not optimized

答案3

得分: 0

你可以使用以下查询来查找所有选中的复选框：

  1. document.querySelectorAll('input:checked')

并根据所选内容准备输出。

  1. function myFunction() {
  2.     const selected = [...document.querySelectorAll('input.food:checked')];
  3.     if (selected.length < 1) {
  4.         return;
  5.     }
  6.     if (selected.length === 1) {
  7.         document.write(`<p> You have selected ${selected[0].name}. Here's a ${selected[0].name}-free recipe:`);
  8.         return;
  9.     }
  10.     document.write('<p> You have selected multiple: ' + selected.map(input => input.name).join(', '));
  11. }
  1. <input type="checkbox" name="peanuts" class="food" />Peanuts<br />
  2. <input type="checkbox" name="cashews" class="food" />Cashews<br />
  3. <input type="checkbox" name="dairy" class="food" />Dairy<br />
  4. <button id="myButton" type="button" value="getValue" onclick="myFunction()">
  5.     Get Value
  6. </button>
英文:

You can find all selected checkboxes with a query:

  1. document.querySelectorAll(&#39;input:checked&#39;)

and prepare output based on what is selected.

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

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

  1. function myFunction() {
  2.     const selected = [...document.querySelectorAll(&#39;input.food:checked&#39;)];
  3.     if (selected.length &lt; 1) {
  4.       return;
  5.     }
  6.     if (selected.length === 1) {
  7.       document.write(`&lt;p&gt; You have selected ${selected[0].name}. Here&#39;s a ${selected[0].name}-free recipe:`);
  8.       return;
  9.     };
  10.     document.write(&#39;&lt;p&gt; You have selected multiple: &#39; + selected.map(input =&gt; input.name).join(&#39;, &#39;));
  11. }

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

  1. &lt;input type=&quot;checkbox&quot; name=&quot;peanuts&quot; class=&quot;food&quot; /&gt;Peanuts&lt;br /&gt;
  3. &lt;input type=&quot;checkbox&quot; name=&quot;cashews&quot; class=&quot;food&quot; /&gt;Cashews&lt;br /&gt;
  5. &lt;input type=&quot;checkbox&quot; name=&quot;dairy&quot; class=&quot;food&quot; /&gt;Dairy&lt;br /&gt;
  7. &lt;button id=&quot;myButton&quot; type=&quot;button&quot; value=&quot;getValue&quot; onclick=&quot;myFunction()&quot;&gt;
  8.     Get Value
  9. &lt;/button&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月24日 13:17:10
  • 转载请务必保留本文链接：https://go.coder-hub.com/75552848.html
  • html
  • javascript
匿名

发表评论

匿名网友

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

确定