单击复选框隐藏具有特定标题的所有元素

Question

我希望当我选中 1 个复选框时，所有其他复选框都未选中，但每个具有特定标题的元素都可以隐藏/显示。

$('.chb').click(function() {
    var input_id = $(this).attr('id');
    $('.chb').prop('checked', false);
    $(this).prop('checked', true);
    $('[title="+input_id+"]').show;
    $('[title!="+input_id+"]').hide;
});

我有这个。

当我点击.chb 类的复选框时，我想取消选中所有其他，但title=ID OF CHECKBOX 的元素变得可见，而其他所有元素都变得不可见。

Answer 1

show() & hide() 是方法。你叫他们错了。请检查更新的答案

$('.chb').click(function() {
    var input_id = $(this).attr('id');
    $('.chb').prop('checked', false);
    $(this).prop('checked', true);
    $('span[title!="' + input_id + '"]').hide();
    $('span[title="'+ input_id + '"]').show();
});

Answer 2

1. 使用以下代码插入您需要的变量，首先关闭'，然后使用+ input_id + 并再次打开单引号：

   $('span[title!="' + input_id + '"]').hide();

   $('span[title="'+ input_id + '"]').show();

2. 调用函数应该是hide()和show()

3. 另一种方法是使用 radio 按钮（感谢 cmets 的 @Roko C. Buljan），正如您在选项 2 中看到的那样，您无需取消选中并手动检查。

更新：复选框和单选都将支持取消选中。

选项 1：复选框版本

$('.chb').click(function() {
  var input_id = this.id;
  var _this = $(this);
  
  //uncheck, show everything
  if (!this.checked) {
    $('span').show();
    _this.siblings().prop('checked', false);
  } else {
  //check, show selected, hide others
    $('span[title!="' + input_id + '"]').hide();
    $('span[title="' + input_id + '"]').show();
    _this.toggle(this.checked);
    _this.siblings().prop('checked', false);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <input type="checkbox" name="" value="1" id="1" class="chb">1<br>
  <input type="checkbox" name="" value="2" id="2" class="chb">2<br>
  <input type="checkbox" name="" value="3" id="3" class="chb">3<br>
  <input type="checkbox" name="" value="4" id="4" class="chb">4<br>
  <input type="checkbox" name="" value="5" id="5" class="chb">5<br>
  <input type="checkbox" name="" value="6" id="6" class="chb">6
</form>

<span title="1">title 1<br></span>
<span title="2">title 2<br></span>
<span title="3">title 3<br></span>
<span title="4">title 4<br></span>
<span title="5">title 5<br></span>
<span title="6">title 6<br></span>

选项 2：单选按钮版本

$('.chb').click(function() {
  var input_id = this.id;
  var previousValue = $(this).data('storedValue');

  if (previousValue) {
    $(this).prop('checked', !previousValue);
    $(this).data('storedValue', !previousValue);
    $('span').show();
  } else {
    $(this).data('storedValue', true);
    $("input[type=radio]:not(:checked)").data("storedValue", false);
    $('span[title!="' + input_id + '"]').hide();
    $('span[title="' + input_id + '"]').show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <input type="radio" name="radio" value="1" id="1" class="chb">1<br>
  <input type="radio" name="radio" value="2" id="2" class="chb">2<br>
  <input type="radio" name="radio" value="3" id="3" class="chb">3<br>
  <input type="radio" name="radio" value="4" id="4" class="chb">4<br>
  <input type="radio" name="radio" value="5" id="5" class="chb">5<br>
  <input type="radio" name="radio" value="6" id="6" class="chb">6
</form>

<span title="1">title 1<br></span>
<span title="2">title 2<br></span>
<span title="3">title 3<br></span>
<span title="4">title 4<br></span>
<span title="5">title 5<br></span>
<span title="6">title 6<br></span>

更新版本：

使用this.check 来确定是否选中了复选框。

使用siblings() 取消选中所有其他复选框。

$('.chb').click(function() {
  var input_id = this.id;
  var _this = $(this);
  
  //uncheck, show everything
  if (!this.checked) {
    $('li').show();
    _this.siblings().prop('checked', false);
  } else {
  //check, show selected, hide others
    $('li[title!="' + input_id + '"]').hide();
    $('li[title="' + input_id + '"]').show();
    _this.siblings().prop('checked', false);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <input type="checkbox" name="" value="1" id="1" class="chb">1
  <br>
  <input type="checkbox" name="" value="2" id="2" class="chb">2
  <br>
  <input type="checkbox" name="" value="3" id="3" class="chb">3
  <br>
  <input type="checkbox" name="" value="4" id="4" class="chb">4
</form>

<li class="clan" title="1">
  <a class="noselect"></a>
  <div class="clan_content">
    some cotent 1
  </div>
</li>
<li class="clan" title="2">
  <a class="noselect"></a>
  <div class="clan_content">
    some cotent 2
  </div>
</li>
<li class="clan" title="3">
  <a class="noselect"></a>
  <div class="clan_content">
    some cotent 3
  </div>
</li>
<li class="clan" title="4">
  <a class="noselect"></a>
  <div class="clan_content">
    some cotent 4
  </div>
</li>

Answer 3

现在我有这样的东西

$('.chb').click(function() {
                                      var input_id = this.id;
                                      $('.chb').prop('checked', false);
                                      $(this).prop('checked', true);
                                      $('li[title!="' + input_id + '"]').hide();
                                      $('li[title="'+ input_id + '"]').show();
                                    });

                            });
<li class="clan" title="<?php the_field('city',$page->ID); ?>">
                            <a class="noselect"><?php the_field('naziv',$page->ID); ?></a>

                            <div class="clan_content">
                                some cotent

                            </div>
                        </li>

我希望当我点击那个复选框时，只有相应的 li 会显示，当我点击另一个时，它会隐藏而另一个会显示。当我点击同一个 li 时，我希望一切都再次可见。

编辑：问题出在 id 中。如果我设置 var input_id = "NewYork";它仅适用于该城市，但如果我将复选框的 id 从纽约更改为 NewYork，则它不起作用...