如何通过单击一次取消选中所有复选框？

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

How to uncheck all checkboxes with a single click?

问题

我用JavaScript编写了一个用于使用<kbd>SHIFT</kbd>键选择复选框的功能。现在我想要通过单击来取消选择。

HTML：

  1. <div class="inbox">
  2.       <div class="item">
  3.         <input type="checkbox" />
  4.         <p>This is an inbox layout.</p>
  5.       </div>
  6.       <div class="item">
  7.         <input type="checkbox" />
  8.         <p>Check one item</p>
  9.       </div>
  10.       <div class="item">
  11.         <input type="checkbox" />
  12.         <p>Hold down your Shift key</p>
  13.       </div>
  14.       <div class="item">
  15.         <input type="checkbox" />
  16.         <p>Check a lower item</p>
  17.       </div>
  18.       <div class="item">
  19.         <input type="checkbox" />
  20.         <p>Everything in between should also be set to checked</p>
  21.       </div>
  22.       <div class="item">
  23.         <input type="checkbox" />
  24.         <p>Try do it without any libraries</p>
  25.       </div>
  26.     </div>

JavaScript 用于选择复选框：

  1. const checkboxes = document.querySelectorAll(
  2.         '.inbox input[type="checkbox"]'
  3.       );
  5.       let lastChecked;
  7.       function handleCheck(e) {
  8.         // 用于选择复选框
  9.         let inBetween = false;
  10.         // 检查是否按下了Shift键
  11.         // 并检查是否正在勾选它
  13.         if (e.shiftKey && this.checked) {
  14.           // 继续执行我们的操作
  15.           // 遍历每个复选框
  16.           checkboxes.forEach(checkbox => {
  17.             console.log(checkbox);
  18.             if (checkbox === this || checkbox === lastChecked) {
  19.               inBetween = !inBetween;
  20.               console.log('Starting to check them in between!');
  21.             }
  23.             if (inBetween) {
  24.               checkbox.checked = true;
  25.             }
  26.           });
  27.         }
  29.         lastChecked = this;
  30.       }
  32.       checkboxes.forEach(checkbox =>
  33.         checkbox.addEventListener('click', handleCheck)
  34.       );

我希望在使用<kbd>SHIFT</kbd>键选择后，当我单击已选择的复选框时，后面的已选择复选框将会取消选择，只需单击一次。

英文:

I made this in JavaScript for selecting checkboxes using the <kbd>SHIFT</kbd> key. Now I want to deselect it by a single click.

HTML:

  1. &lt;div class=&quot;inbox&quot;&gt;
  2.       &lt;div class=&quot;item&quot;&gt;
  3.         &lt;input type=&quot;checkbox&quot; /&gt;
  4.         &lt;p&gt;This is an inbox layout.&lt;/p&gt;
  5.       &lt;/div&gt;
  6.       &lt;div class=&quot;item&quot;&gt;
  7.         &lt;input type=&quot;checkbox&quot; /&gt;
  8.         &lt;p&gt;Check one item&lt;/p&gt;
  9.       &lt;/div&gt;
  10.       &lt;div class=&quot;item&quot;&gt;
  11.         &lt;input type=&quot;checkbox&quot; /&gt;
  12.         &lt;p&gt;Hold down your Shift key&lt;/p&gt;
  13.       &lt;/div&gt;
  14.       &lt;div class=&quot;item&quot;&gt;
  15.         &lt;input type=&quot;checkbox&quot; /&gt;
  16.         &lt;p&gt;Check a lower item&lt;/p&gt;
  17.       &lt;/div&gt;
  18.       &lt;div class=&quot;item&quot;&gt;
  19.         &lt;input type=&quot;checkbox&quot; /&gt;
  20.         &lt;p&gt;Everything in between should also be set to checked&lt;/p&gt;
  21.       &lt;/div&gt;
  22.       &lt;div class=&quot;item&quot;&gt;
  23.         &lt;input type=&quot;checkbox&quot; /&gt;
  24.         &lt;p&gt;Try do it without any libraries&lt;/p&gt;
  25.       &lt;/div&gt;
  26.     &lt;/div&gt;

JavaScript to select the checkbox:

  1.  const checkboxes = document.querySelectorAll(
  2.         &#39;.inbox input[type=&quot;checkbox&quot;]&#39;
  3.       );
  5.       let lastChecked;
  7.       function handleCheck(e) {
  8.         //for selecting the checkboxes
  9.         let inBetween = false;
  10.         // Check if they had the shift key down
  11.         // AND check that they are checking it
  13.         if (e.shiftKey &amp;&amp; this.checked) {
  14.           // go ahead and do what we please
  15.           // loop over every single checkbox
  16.           checkboxes.forEach(checkbox =&gt; {
  17.             console.log(checkbox);
  18.             if (checkbox === this || checkbox === lastChecked) {
  19.               inBetween = !inBetween;
  20.               console.log(&#39;Starting to check them in between!&#39;);
  21.             }
  23.             if (inBetween) {
  24.               checkbox.checked = true;
  25.             }
  26.           });
  27.         }
  29.         lastChecked = this;
  30.       }
  32.       checkboxes.forEach(checkbox =&gt;
  33.         checkbox.addEventListener(&#39;click&#39;, handleCheck)
  34.       );

I want after selecting with <kbd>SHIFT</kbd> key, when I click on a selected checkbox the selected checkboxes which comes after that to be unchecked with a single click.

答案1

得分: 0

你可以通过将复选框放入一个数组中并获取要检查的复选框范围来简化你的逻辑：

  1. // 将所有复选框收集到一个数组中以便更容易处理
  2. const checkboxes = [...document.querySelectorAll('.inbox input[type="checkbox"])];
  3. let lastChecked;
  5. function handleCheck(e) {
  6.   if (e.shiftKey) {
  7.     // 我们应该将范围内的所有复选框都设置为这个值（包括最后选中的）
  8.     const checked = lastChecked?.checked;
  9.     
  10.     // 获取要检查的复选框范围，从lastChecked到this（包括两者）
  11.     const range = [lastChecked, this].map(check => checkboxes.indexOf(check)).sort((a, b) => a - b);
  12.     
  13.     // 获取范围内的复选框并将其选中
  14.     checkboxes.slice(range[0], range[1] + 1).forEach(check => check.checked = checked);
  15.   }
  16.   lastChecked = this;
  17. }
  19. checkboxes.forEach(checkbox =>
  20.   checkbox.addEventListener('click', handleCheck)
  21. );
  1. p {
  2.   display: inline-block;
  3.   margin: 0;
  4. }
  1. <div class="inbox">
  2.   <div class="item">
  3.     <input type="checkbox" />
  4.     <p>This is an inbox layout.</p>
  5.   </div>
  6.   <div class="item">
  7.     <input type="checkbox" />
  8.     <p>Check one item</p>
  9.   </div>
  10.   <div class="item">
  11.     <input type="checkbox" />
  12.     <p>Hold down your Shift key</p>
  13.   </div>
  14.   <div class="item">
  15.     <input type="checkbox" />
  16.     <p>Check a lower item</p>
  17.   </div>
  18.   <div class="item">
  19.     <input type="checkbox" />
  20.     <p>Everything in between should also be set to checked</p>
  21.   </div>
  22.   <div class="item">
  23.     <input type="checkbox" />
  24.     <p>Try do it without any libraries</p>
  25.   </div>
  26. </div>
英文:

You could simplify your logic by putting your checkboxes into an array and getting the range of checkboxes to check:

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

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

  1. // collect all the checkboxes into an array for easier handling
  3. const checkboxes = [...document.querySelectorAll(&#39;.inbox input[type=&quot;checkbox&quot;]&#39;)];
  5. let lastChecked;
  7. function handleCheck(e) {
  8.   
  9.   if (e.shiftKey) {
  11.     // we should set all checkboxes in the range with this value (including the last checked)
  12.     const checked = lastChecked?.checked;
  14.     // get the range of checkboxes to check between lastChecked and this (including both)
  15.     const range = [lastChecked, this].map(check =&gt; checkboxes.indexOf(check)).sort((a, b) =&gt; a - b);
  17.     // get checkboxes in the range and check them
  18.     checkboxes.slice(range[0], range[1] + 1).forEach(check =&gt; check.checked = checked);
  20.   }
  21.    
  23.   lastChecked = this;
  24. }
  26. checkboxes.forEach(checkbox =&gt;
  27.   checkbox.addEventListener(&#39;click&#39;, handleCheck)
  28. );

<!-- language: lang-css -->

  1. p{
  2. display:inline-block;
  3. margin:0;
  4. }

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

  1. &lt;div class=&quot;inbox&quot;&gt;
  2.       &lt;div class=&quot;item&quot;&gt;
  3.         &lt;input type=&quot;checkbox&quot; /&gt;
  4.         &lt;p&gt;This is an inbox layout.&lt;/p&gt;
  5.       &lt;/div&gt;
  6.       &lt;div class=&quot;item&quot;&gt;
  7.         &lt;input type=&quot;checkbox&quot; /&gt;
  8.         &lt;p&gt;Check one item&lt;/p&gt;
  9.       &lt;/div&gt;
  10.       &lt;div class=&quot;item&quot;&gt;
  11.         &lt;input type=&quot;checkbox&quot; /&gt;
  12.         &lt;p&gt;Hold down your Shift key&lt;/p&gt;
  13.       &lt;/div&gt;
  14.       &lt;div class=&quot;item&quot;&gt;
  15.         &lt;input type=&quot;checkbox&quot; /&gt;
  16.         &lt;p&gt;Check a lower item&lt;/p&gt;
  17.       &lt;/div&gt;
  18.       &lt;div class=&quot;item&quot;&gt;
  19.         &lt;input type=&quot;checkbox&quot; /&gt;
  20.         &lt;p&gt;Everything in between should also be set to checked&lt;/p&gt;
  21.       &lt;/div&gt;
  22.       &lt;div class=&quot;item&quot;&gt;
  23.         &lt;input type=&quot;checkbox&quot; /&gt;
  24.         &lt;p&gt;Try do it without any libraries&lt;/p&gt;
  25.       &lt;/div&gt;
  26.     &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

你可以将这部分添加到你的 handleCheck 函数中：

  1. else if (e.shiftKey && !this.checked) {
  2.   // 如果按下了 Shift 键并且正在取消选中复选框
  3.   // 遍历每个复选框并取消中间的复选框选中状态
  4.   checkboxes.forEach(checkbox => {
  5.     if (checkbox === this || checkbox === lastChecked) {
  6.       inBetween = !inBetween;
  7.     }
  9.     if (inBetween) {
  10.       checkbox.checked = false;
  11.     }
  12.   });
  13. }
英文:

You can add this to your handleCheck :

  1. else if (e.shiftKey &amp;&amp; !this.checked) {
  2.   // If shift key is down and checkbox is being unchecked
  3.   // loop over every single checkbox and deselect the ones in between
  4.   checkboxes.forEach(checkbox =&gt; {
  5.     if (checkbox === this || checkbox === lastChecked) {
  6.       inBetween = !inBetween;
  7.     }
  9.     if (inBetween) {
  10.       checkbox.checked = false;
  11.     }
  12.   });
  13. }

答案3

得分: 0

似乎您没有检查文档是否准备好。

我只是将您的代码包装在DOMContentLoaded事件监听器中，它可以正常工作。

  1. document.addEventListener("DOMContentLoaded", () => {
  2.   const checkboxes = document.querySelectorAll(
  3.     '.inbox input[type="checkbox"]'
  4.   );
  6.   let lastChecked;
  8.   function handleCheck(e) {
  9.     // 用于选择复选框
  10.     let inBetween = false;
  11.     // 检查是否按下了Shift键
  12.     // 并检查是否正在检查它
  13.     if (e.shiftKey && this.checked) {
  14.       // 继续执行我们想要的操作
  15.       // 循环遍历每个复选框
  16.       checkboxes.forEach(checkbox => {
  17.         console.log(checkbox);
  18.         if (checkbox === this || checkbox === lastChecked) {
  19.           inBetween = !inBetween;
  20.           console.log('Starting to check them in between!');
  21.         }
  23.         if (inBetween) {
  24.           checkbox.checked = true;
  25.         }
  26.       });
  27.     }
  29.     lastChecked = this;
  30.   }
  32.   checkboxes.forEach(checkbox =>
  33.     checkbox.addEventListener('click', handleCheck)
  34.   );
  35. });

如您所见，没有更多要添加的内容。
希望这能帮助到您。

英文:

it seems you do not check the document is ready.

I just wrapped your code into a DOMContentLoaded Eventlistener and it works.

  1. document.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; {
  2. const checkboxes = document.querySelectorAll(
  3.     &#39;.inbox input[type=&quot;checkbox&quot;]&#39;
  4.   );
  6.   let lastChecked;
  8.   function handleCheck(e) {
  9.     //for selecting the checkboxes
  10.     let inBetween = false;
  11.     // Check if they had the shift key down
  12.     // AND check that they are checking it
  13.     
  14.     if (e.shiftKey &amp;&amp; this.checked) {
  15.       // go ahead and do what we please
  16.       // loop over every single checkbox
  17.       checkboxes.forEach(checkbox =&gt; {
  18.         console.log(checkbox);
  19.         if (checkbox === this || checkbox === lastChecked) {
  20.           inBetween = !inBetween;
  21.           console.log(&#39;Starting to check them in between!&#39;);
  22.         }
  24.         if (inBetween) {
  25.           checkbox.checked = true;
  26.         }
  27.       });
  28.     }
  30.     lastChecked = this;
  31.   }
  33.   checkboxes.forEach(checkbox =&gt;
  34.     checkbox.addEventListener(&#39;click&#39;, handleCheck)
  35.   );
  36. });

As you cann see there isn't more to add.
Hope this will help.

答案4

得分: -1

通过对您的代码进行一些更改，这将实现取消选中和选中的功能。它会停在最后一个已选中（或取消选中）的位置，与您的原始示例相同，我假设这是您想要的行为。

  1. const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
  3. let lastChecked;
  5. function handleCheck(e) {
  6.     // 用于选择复选框
  7.     let inBetween = false;
  8.     // 检查是否按下了Shift键
  9.     // 并检查是否正在选中它
  11.     if (e.shiftKey/* && this.checked */) { // 忽略当前的选中状态
  12.         // 继续执行我们希望的操作
  13.         // 遍历每个复选框
  14.         checkboxes.forEach((checkbox) => {
  15.             console.log(checkbox);
  16.             if (checkbox === this || checkbox === lastChecked) {
  17.                 inBetween = !inBetween;
  18.                 console.log("开始选中它们之间的复选框!");
  19.             }
  21.             if (inBetween) {
  22.                 checkbox.checked = this.checked; // 处理选中/取消选中
  23.             }
  24.         });
  25.     }
  27.     lastChecked = this;
  28. }
  30. checkboxes.forEach((checkbox) =>
  31.     checkbox.addEventListener("click", handleCheck)
  32. );

注意：上面的代码用于处理复选框的选择和取消选择操作，它允许使用Shift键来一次性选择多个复选框。

英文:

With a couple changes to your code, this should accomplish unchecking as well as checking. It will stop at the lastChecked (or unchecked) as in your original example, I assumed that's the behavior you wanted.

  1. const checkboxes = document.querySelectorAll(&#39;.inbox input[type=&quot;checkbox&quot;]&#39;);
  3. let lastChecked;
  5. function handleCheck(e) {
  6.     //for selecting the checkboxes
  7.     let inBetween = false;
  8.     // Check if they had the shift key down
  9.     // AND check that they are checking it
  11.     if (e.shiftKey/* &amp;&amp; this.checked */) { // ignore current checked state
  12.         // go ahead and do what we please
  13.         // loop over every single checkbox
  14.         checkboxes.forEach((checkbox) =&gt; {
  15.             console.log(checkbox);
  16.             if (checkbox === this || checkbox === lastChecked) {
  17.                 inBetween = !inBetween;
  18.                 console.log(&quot;Starting to check them in between!&quot;);
  19.             }
  21.             if (inBetween) {
  22.                 checkbox.checked = this.checked; // handles both checked/unchecked
  23.             }
  24.         });
  25.     }
  27.     lastChecked = this;
  28. }
  30. checkboxes.forEach((checkbox) =&gt;
  31.     checkbox.addEventListener(&quot;click&quot;, handleCheck)
  32. );

huangapple
  • 本文由 发表于 2023年7月20日 16:05:49
  • 转载请务必保留本文链接：https://go.coder-hub.com/76727839.html
  • checkbox
  • foreach
  • javascript
匿名

发表评论

匿名网友

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

确定