javascript 选中Jquery复选框如果选中或未选中两个复选框，则显示/隐藏Div

sycxhyv7 于 2023-02-07 发布在 Java

关注(0)|答案(3)|浏览(204)

我有一个简单的jquery代码，用于通过属性进行检查的复选框。我知道这有很多相似之处，但这里的想法是不同的。
我想在以下条件下显示A_B div元素：

*#1：**用户选中checked复选框A或B，然后显示A_B div元素
*#2：**如果用户选中uncheckedA复选框，但复选框B仍处于选中状态。则A_B div元素仍显示。

*Note: This can be reversal for the situation*

*#3**如果用户取消选中A或B复选框。则仅隐藏A_B div元素。

现在。当我取消选中A或B复选框时。div元素将隐藏，不应该切换。这里有什么需要改进的吗？要实现以下3条件？
任何想法/解决方案将是一个很大的帮助。可能也是有用的一些用户遇到同样的问题，因为我的。谢谢。

$('input[chck-type="a_b"]').click(function(){
    if (
    $(this).prop("checked") == true
  ) {
      $('.A_B').removeClass('hide');
  } else {
    $('.A_B').addClass('hide');
  }
});

$('input[chck-type="c"]').click(function(){
    if (
    $(this).prop("checked") == true
  ) {
      $('.C_Box').removeClass('hide');
  } else {
    $('.C_Box').addClass('hide');
  }
});

.hide {display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="checkbox" chck-type="a_b">A</p>
<p><input type="checkbox" chck-type="a_b">B</p>
<p><input type="checkbox" chck-type="c">C</p>

<div class='A_B hide'>
This box is for A or B.
</div>

<div class='C_Box hide'>
This box is for C.
</div>

JavaScript

来源：https://stackoverflow.com/questions/75357203/jquery-checkbox-checked-show-hide-div-if-two-checkboxes-is-check-or-unchecked

3条答案

按热度按时间

nkkqxpd91#

您不需要检查是否取消选中了两个复选框。

$('input[chck-type="a_b"]').click(function(){
    if (
    $(this).prop("checked") == true
  ) {
      $('.A_B').removeClass('hide');
  } else if($('input[chck-type="a_b"]')[0].checked == false && $('input[chck-type="a_b"]')[1].checked == false) {
    $('.A_B').addClass('hide');
  }
});

$('input[chck-type="c"]').click(function(){
    if (
    $(this).prop("checked") == true
  ) {
      $('.C_Box').removeClass('hide');
  } else {
    $('.C_Box').addClass('hide');
  }
});

.hide {display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="checkbox" chck-type="a_b">A</p>
<p><input type="checkbox" chck-type="a_b">B</p>
<p><input type="checkbox" chck-type="c">C</p>

<div class='A_B hide'>
This box is for A or B.
</div>

<div class='C_Box hide'>
This box is for C.
</div>

赞(0）回复(0）举报 2023-02-07

qeeaahzv2#

$('input[chck-type="a_b"]').click(function(){
    let checkboxes = $('input[chck-type="a_b"]:checked').length;
    if (
    checkboxes != 0
  ) {
      $('.A_B').removeClass('hide');
  } else {
    $('.A_B').addClass('hide');
  }
});

$('input[chck-type="c"]').click(function(){
    if (
    $(this).prop("checked") == true
  ) {
      $('.C_Box').removeClass('hide');
  } else {
    $('.C_Box').addClass('hide');
  }
});

.hide {display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p><input type="checkbox" chck-type="a_b">A</p>
<p><input type="checkbox" chck-type="a_b">B</p>
<p><input type="checkbox" chck-type="c">C</p>

<div class='A_B hide'>
This box is for A or B.
</div>

<div class='C_Box hide'>
This box is for C.
</div>

赞(0）回复(0）举报 2023-02-07

u3r8eeie3#

简单地改变你的JS到这个，将工作。

$('input').on('click', function () {
      var a_b = $('input[chck-type="a_b"]').is(':checked');
      if (!a_b) {
        $('.A_B').addClass('hide');
      } else {
        $('.A_B').removeClass('hide');
      }

      var c = $('input[chck-type="c"]').is(':checked');
      if (!c) {
        $('.C_Box').addClass('hide');
      } else {
        $('.C_Box').removeClass('hide');
      }
    });

.hide {
      display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <p><input type="checkbox" chck-type="a_b" />A</p>
    <p><input type="checkbox" chck-type="a_b" />B</p>
    <p><input type="checkbox" chck-type="c" />C</p>

    <div class="A_B hide">This box is for A or B.</div>

    <div class="C_Box hide">This box is for C.</div>

示例：Stackblitz

赞(0）回复(0）举报 2023-02-07

我来回答

javascript 选中Jquery复选框如果选中或未选中两个复选框，则显示/隐藏Div

3条答案

相关问题

热门标签

最新问答