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

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

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

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

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

2. 通话功能应为hide()和show()

3. 另一种方法是使用radio按钮（感谢评论中的@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 2

show()＆amp; 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 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 =＆＃34; NewYork＆＃34 ;;它只为那个城市工作，但是如果我从newyork将复选框的ID更改为NewYork它不起作用......