Jquery 复选框已选中/隐藏 div 如果两个复选框已选中或未选中

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

Jquery Checkbox Checked Show / Hide Div if two checkboxes is check or unchecked

问题

以下是翻译好的部分：

#1：如果用户选中复选框"A"或"B"，则显示"A_B" div元素。

#2：如果用户取消选中"A"复选框，但仍选中"B"复选框，则"A_B" div元素仍然显示。

#3：如果用户取消选中"A"和"B"复选框，那么只有"A_B" div元素将被隐藏。

现在，当我取消选中"A"或"B"复选框时，div元素将被隐藏，不应该切换。有没有什么改进的方法来实现这3个条件？

任何想法/解决方案都将是很大的帮助。对于遇到与我相同问题的一些用户来说，这也可能会很有用。

英文:

I have this simple jquery code for checkbox that checks via attributes. I know that there are many similarities for this answered already but the idea here is different.

I want to show the A_B div element for the following condition:

#1: User checked checkbox A or B then shows the A_B div element

#2: If user unchecked A checkbox but checkbox B is still checked. Then A_B div element is still showing.

*Note: This can be reversal for the situation*

#3 If user uncheckeds both A or B checkbox. Then only A_B div element will hide.

Right now. When I uncheck A or B checkbox. The div element will hide, should not suppose to toggle.
Is there anything here to improve. To achieve the following 3 conditions?

Any ideas / solutions would be a great help. Might be useful also to some users that encounters the same problem as mine. Thanks.

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

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

  1. $(&#39;input[chck-type=&quot;a_b&quot;]&#39;).click(function(){
  2. 	if (
  3.   	$(this).prop(&quot;checked&quot;) == true
  4.   ) {
  5.  	  $(&#39;.A_B&#39;).removeClass(&#39;hide&#39;);
  6.   } else {
  7.   	$(&#39;.A_B&#39;).addClass(&#39;hide&#39;);
  8.   }
  9. });
  11. $(&#39;input[chck-type=&quot;c&quot;]&#39;).click(function(){
  12. 	if (
  13.   	$(this).prop(&quot;checked&quot;) == true
  14.   ) {
  15.  	  $(&#39;.C_Box&#39;).removeClass(&#39;hide&#39;);
  16.   } else {
  17.   	$(&#39;.C_Box&#39;).addClass(&#39;hide&#39;);
  18.   }
  19. });

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

  1. .hide {display:none}

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

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;p&gt;&lt;input type=&quot;checkbox&quot; chck-type=&quot;a_b&quot;&gt;A&lt;/p&gt;
  3. &lt;p&gt;&lt;input type=&quot;checkbox&quot; chck-type=&quot;a_b&quot;&gt;B&lt;/p&gt;
  4. &lt;p&gt;&lt;input type=&quot;checkbox&quot; chck-type=&quot;c&quot;&gt;C&lt;/p&gt;
  7. &lt;div class=&#39;A_B hide&#39;&gt;
  8. This box is for A or B.
  9. &lt;/div&gt;
  11. &lt;div class=&#39;C_Box hide&#39;&gt;
  12. This box is for C.
  13. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

您没有检查两个复选框是否都未选中。

  1. $('[chck-type="a_b"]').click(function(){
  2.     if ($(this).prop("checked") == true) {
  3.         $('.A_B').removeClass('hide');
  4.     } else if($('input[chck-type="a_b"]:checked').length === 0) {
  5.         $('.A_B').addClass('hide');
  6.     }
  7. });
  9. $('input[chck-type="c"]').click(function(){
  10.     if ($(this).prop("checked") == true) {
  11.         $('.C_Box').removeClass('hide');
  12.     } else {
  13.         $('.C_Box').addClass('hide');
  14.     }
  15. });
  1. .hide {display:none}
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <p><input type="checkbox" chck-type="a_b">A</p>
  3. <p><input type="checkbox" chck-type="a_b">B</p>
  4. <p><input type="checkbox" chck-type="c">C</p>
  6. <div class='A_B hide'>
  7. This box is for A or B.
  8. </div>
  10. <div class='C_Box hide'>
  11. This box is for C.
  12. </div>
英文:

You are not checking if both checkboxes are unchecked or not.

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

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

  1. $(&#39;input[chck-type=&quot;a_b&quot;]&#39;).click(function(){
  2.     if (
  3.     $(this).prop(&quot;checked&quot;) == true
  4.   ) {
  5.       $(&#39;.A_B&#39;).removeClass(&#39;hide&#39;);
  6.   } else if($(&#39;input[chck-type=&quot;a_b&quot;]&#39;)[0].checked == false &amp;&amp; $(&#39;input[chck-type=&quot;a_b&quot;]&#39;)[1].checked == false) {
  7.     $(&#39;.A_B&#39;).addClass(&#39;hide&#39;);
  8.   }
  9. });
  11. $(&#39;input[chck-type=&quot;c&quot;]&#39;).click(function(){
  12.     if (
  13.     $(this).prop(&quot;checked&quot;) == true
  14.   ) {
  15.       $(&#39;.C_Box&#39;).removeClass(&#39;hide&#39;);
  16.   } else {
  17.     $(&#39;.C_Box&#39;).addClass(&#39;hide&#39;);
  18.   }
  19. });

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

  1. .hide {display:none}

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

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;p&gt;&lt;input type=&quot;checkbox&quot; chck-type=&quot;a_b&quot;&gt;A&lt;/p&gt;
  3. &lt;p&gt;&lt;input type=&quot;checkbox&quot; chck-type=&quot;a_b&quot;&gt;B&lt;/p&gt;
  4. &lt;p&gt;&lt;input type=&quot;checkbox&quot; chck-type=&quot;c&quot;&gt;C&lt;/p&gt;
  7. &lt;div class=&#39;A_B hide&#39;&gt;
  8. This box is for A or B.
  9. &lt;/div&gt;
  11. &lt;div class=&#39;C_Box hide&#39;&gt;
  12. This box is for C.
  13. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

  1. $('[chck-type="a_b"]').click(function(){
  2.     let checkboxes = $('[chck-type="a_b"]:checked').length;
  3.     if (
  4.     checkboxes != 0
  5.   ) {
  6.       $('.A_B').removeClass('hide');
  7.   } else {
  8.     $('.A_B').addClass('hide');
  9.   }
  10. });
  12. $('[chck-type="c"]').click(function(){
  13.     if (
  14.     $(this).prop("checked") == true
  15.   ) {
  16.       $('.C_Box').removeClass('hide');
  17.   } else {
  18.     $('.C_Box').addClass('hide');
  19.   }
  20. });
  1. .hide {display:none}
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  3. <p><input type="checkbox" chck-type="a_b">A</p>
  4. <p><input type="checkbox" chck-type="a_b">B</p>
  5. <p><input type="checkbox" chck-type="c">C</p>
  7. <div class='A_B hide'>
  8. This box is for A or B.
  9. </div>
  11. <div class='C_Box hide'>
  12. This box is for C.
  13. </div>
英文:

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

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

  1. $(&#39;input[chck-type=&quot;a_b&quot;]&#39;).click(function(){
  2.     let checkboxes = $(&#39;input[chck-type=&quot;a_b&quot;]:checked&#39;).length;
  3.     if (
  4.     checkboxes != 0
  5.   ) {
  6.       $(&#39;.A_B&#39;).removeClass(&#39;hide&#39;);
  7.   } else {
  8.     $(&#39;.A_B&#39;).addClass(&#39;hide&#39;);
  9.   }
  10. });
  12. $(&#39;input[chck-type=&quot;c&quot;]&#39;).click(function(){
  13.     if (
  14.     $(this).prop(&quot;checked&quot;) == true
  15.   ) {
  16.       $(&#39;.C_Box&#39;).removeClass(&#39;hide&#39;);
  17.   } else {
  18.     $(&#39;.C_Box&#39;).addClass(&#39;hide&#39;);
  19.   }
  20. });

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

  1. .hide {display:none}

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

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;p&gt;&lt;input type=&quot;checkbox&quot; chck-type=&quot;a_b&quot;&gt;A&lt;/p&gt;
  3. &lt;p&gt;&lt;input type=&quot;checkbox&quot; chck-type=&quot;a_b&quot;&gt;B&lt;/p&gt;
  4. &lt;p&gt;&lt;input type=&quot;checkbox&quot; chck-type=&quot;c&quot;&gt;C&lt;/p&gt;
  7. &lt;div class=&#39;A_B hide&#39;&gt;
  8. This box is for A or B.
  9. &lt;/div&gt;
  11. &lt;div class=&#39;C_Box hide&#39;&gt;
  12. This box is for C.
  13. &lt;/div&gt;

<!-- end snippet -->

答案3

得分: 0

只需将您的JS更改为以下内容，就能正常工作。

  1. $('input').on('click', function () {
  2.   var a_b = $('input[chck-type="a_b"]').is(':checked');
  3.   if (!a_b) {
  4.     $('.A_B').addClass('hide');
  5.   } else {
  6.     $('.A_B').removeClass('hide');
  7.   }
  9.   var c = $('input[chck-type="c"]').is(':checked');
  10.   if (!c) {
  11.     $('.C_Box').addClass('hide');
  12.   } else {
  13.     $('.C_Box').removeClass('hide');
  14.   }
  15. });

您的HTML和CSS部分保持不变。

英文:

Simply change your JS to this and will work.

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

  1. &lt;!-- language: lang-js --&gt;
  4.     $(&#39;input&#39;).on(&#39;click&#39;, function () {
  5.       var a_b = $(&#39;input[chck-type=&quot;a_b&quot;]&#39;).is(&#39;:checked&#39;);
  6.       if (!a_b) {
  7.         $(&#39;.A_B&#39;).addClass(&#39;hide&#39;);
  8.       } else {
  9.         $(&#39;.A_B&#39;).removeClass(&#39;hide&#39;);
  10.       }
  12.       var c = $(&#39;input[chck-type=&quot;c&quot;]&#39;).is(&#39;:checked&#39;);
  13.       if (!c) {
  14.         $(&#39;.C_Box&#39;).addClass(&#39;hide&#39;);
  15.       } else {
  16.         $(&#39;.C_Box&#39;).removeClass(&#39;hide&#39;);
  17.       }
  18.     });
  21. &lt;!-- language: lang-css --&gt;
  23.     .hide {
  24.       display: none;
  25.     }
  28. &lt;!-- language: lang-html --&gt;
  30.     &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  31.     &lt;p&gt;&lt;input type=&quot;checkbox&quot; chck-type=&quot;a_b&quot; /&gt;A&lt;/p&gt;
  32.     &lt;p&gt;&lt;input type=&quot;checkbox&quot; chck-type=&quot;a_b&quot; /&gt;B&lt;/p&gt;
  33.     &lt;p&gt;&lt;input type=&quot;checkbox&quot; chck-type=&quot;c&quot; /&gt;C&lt;/p&gt;
  35.     &lt;div class=&quot;A_B hide&quot;&gt;This box is for A or B.&lt;/div&gt;
  37.     &lt;div class=&quot;C_Box hide&quot;&gt;This box is for C.&lt;/div&gt;

<!-- end snippet -->

Example : Stackblitz

huangapple
  • 本文由 发表于 2023年2月6日 11:54:01
  • 转载请务必保留本文链接：https://go.coder-hub.com/75357203.html
  • checkbox
  • javascript
  • jquery
匿名

发表评论

匿名网友

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

确定