Jquery附加：选中选择器

Question

我需要做的是当我点击test1复选框时显示show-content div id项目1中的div：

<div class="show-content">
    <div id="item1">
      test1
    </div>

当我点击test2复选框时，显示show-content div id项目2中的div：

<div class="show-content">
    <div id="item2">
      test2
    </div>

jsfiddle：http://jsfiddle.net/P3zMu/271/

＆＃13;

＆＃13;

var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
  var $li = $(this).parent('li').get(0);
  if ($(this).is(':checked')) {
  $('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
  } else {
    $('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
  }
$("span").bind("click", function() {
  $(this).remove();
  var selectedText = $(this).attr('selected-item');
  selectedText = selectedText.split('_');
    $('li#' + selectedText[0]).find('input').prop('checked', false);
  });
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
  <li style="text-indent: 0px;">
    <a id="selected_items">Refined by:</a>
  </li>
  <div class="collapse-link">
    <a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
  </div>
  <ul class="bill-type">
    <li id="item1">
      <input type="checkbox" />
      <label for="">test1</label>
      <span for="" class="pull-right">222</span>
    </li>
    <li id="item2">
      <input type="checkbox" />
      <label for="">test2</label>
      <span for="" class="pull-right">33</span>
    </li>
  </ul>

<h1> show the content </h1>

  <div class="show-content">
    <div id="item1">
      test1
    </div>
    <div id="item2">
      test2
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

首先，您有多个具有相同ID的元素，并且Id显示从不存在多次。如果需要，请使用class。

$(".show-content [class^=item]").hide();
$('#selected_items span').each(function() {
var id = $(this).attr("selected-item").replace("_selected","");
  $(".show-content ."+ id).show()
})

我已经添加了上面的代码。希望这是你想要的。

<强>演示

＆＃13;

＆＃13;

var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
  var $li = $(this).parent('li').get(0);
  if ($(this).is(':checked')) {
    $('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
  } else {
    $('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
  }
  
  $(".show-content [class^=item]").hide();
  $('#selected_items span').each(function() {
  var id = $(this).attr("selected-item").replace("_selected","");
    $(".show-content ."+ id).show()
  })
  
  $("span").bind("click", function() {
    $(this).remove();
    var selectedText = $(this).attr('selected-item');
    selectedText = selectedText.split('_');
    $('li#' + selectedText[0]).find('input').prop('checked', false);
  });
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
  <li style="text-indent: 0px;">
    <a id="selected_items">Refined by:</a>
  </li>
  <div class="collapse-link">
    <a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
  </div>
  <ul class="bill-type">
    <li id="item1">
      <input type="checkbox" />
      <label for="">test1</label>
      <span for="" class="pull-right">222</span>
    </li>
    <li id="item2">
      <input type="checkbox" />
      <label for="">test2</label>
      <span for="" class="pull-right">33</span>
    </li>
  </ul>

  <h1> show the content </h1>

  <div class="show-content">
    <div class="item1">
      test1
    </div>
    <div class="item2">
      test2
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的重复ID，不理想。但在这种情况下仍然有用。

下面我首先在你的部分设置display：none。

然后只需对它们使用切换类，并在show-content div中找到相同的id。

var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
  var $li = $(this).parent('li').get(0);
  
  var id = $(this).closest('[id]').attr('id');  
  $('.show-content #' + id).toggle($(this).is(':checked'));
  
  if ($(this).is(':checked')) {
  $('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
  } else {
    $('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
  }
$("span").bind("click", function() {
  $(this).remove();
  var selectedText = $(this).attr('selected-item');
  selectedText = selectedText.split('_');
    $('li#' + selectedText[0]).find('input').prop('checked', false);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
  <li style="text-indent: 0px;">
    <a id="selected_items">Refined by:</a>
  </li>
  <div class="collapse-link">
    <a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
  </div>
  <ul class="bill-type">
    <li id="item1">
      <input type="checkbox" />
      <label for="">test1</label>
      <span for="" class="pull-right">222</span>
    </li>
    <li id="item2">
      <input type="checkbox" />
      <label for="">test2</label>
      <span for="" class="pull-right">33</span>
    </li>
  </ul>

<h1> show the content </h1>

  <div class="show-content">
    <div id="item1" style="display:none">
      test1
    </div>
    <div id="item2" style="display:none">
      test2
    </div>
  </div>

Answer 3

试试这个

1. 多个相同的ID，不是很好的。所以更改类名
2. 在显示特定项目之前隐藏所有show-content个孩子
＆＃13;
＆＃13;
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
  var $li = $(this).closest('li');
  $('.show-content').find('div').hide();
   
  if ($(this).is(':checked')) {
  $('.show-content').find('div[class="'+$li.attr('id')+'"]').show()
    $('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
  } else {
    $('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
  }
  $("span").bind("click", function() {
    $(this).remove();
    var selectedText = $(this).attr('selected-item');
    selectedText = selectedText.split('_');
    $('li#' + selectedText[0]).find('input').prop('checked', false);
  });
});
＆＃13;
.test1 {
  border: 1px solid red;
}
.show-content div{
display:none;
}
＆＃13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-nav">
  <li style="text-indent: 0px;">
    <a id="selected_items">Refined by:</a>
  </li>
  <div class="collapse-link">
    <a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
  </div>
  <ul class="bill-type">
    <li id="item1">
      <input type="checkbox" />
      <label for="">test1</label>
      <span for="" class="pull-right">222</span>
    </li>
    <li id="item2">
      <input type="checkbox" />
      <label for="">test2</label>
      <span for="" class="pull-right">33</span>
    </li>
  </ul>

  <div class="show-content">
    <div class="item1">
      test1
    </div>

    <div class="item2">
      test2
    </div>

  </div>
＆＃13;
＆＃13;
＆＃13;

Answer 4

使用data attributes和CSS的一个简单解决方案：

$('[data-checked-toggle]').each(function(i) {
    var thisCheckbox = $(this);
    var thisTarget = $( thisCheckbox.data('checkedToggle') );
    thisCheckbox.on('change', function(e) {
    	thisTarget.toggleClass('is-visible', thisCheckbox.is(':checked'));
    }).trigger('change');
});

.show-content > div {
    display: none;
}
.show-content > div.is-visible {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <label for="checkbox1">
        <input id="checkbox1" type="checkbox" data-checked-toggle="#item1" /> test1
    </label>
</p>
<p>
    <label for="checkbox2">
        <input id="checkbox2" type="checkbox" data-checked-toggle="#item2" /> test2
    </label>
</p>

<div class="show-content">
    <div id="item1">
        test1
    </div>
    <div id="item2">
        test2
    </div>
</div>

同样在JSFiddle。

这样你就可以很好地控制：

• 在HTML中定义哪个元素由复选框控制，在页面上的任何位置
• 在CSS内你决定如何呈现元素，它不一定是不可见的 - 当你添加/删除类时很容易

Answer 5

您可以使用自定义toggle属性，然后使用$('.show-content > div').hide(); $(".bill-type input[type='checkbox']").change(function() { var id = $(this).parent('li').attr('id'); $('.show-content > div[data-target="' + id + '"]').toggle($(this).is(':checked')) })这些元素基于复选框，而不是多个相同的<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="bill-type"> <li id="item1"> <input type="checkbox" /> <label for="">test1</label> <span for="" class="pull-right">222</span> </li> <li id="item2"> <input type="checkbox" /> <label for="">test2</label> <span for="" class="pull-right">33</span> </li> </ul> <div class="show-content"> <div data-target="item1">test1</div> <div data-target="item2">test2</div> </div>。

{{1}}

{{1}}

Answer 6

以下是示例代码。我刚刚在复选框上添加了两个ID。

<html>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
    <a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
    <a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
    <li id="item1">
        <input type="checkbox" id="checkbox1" />
        <label for="">test1</label>
        <span for="" class="pull-right">222</span>
    </li>
    <li id="item2">
        <input type="checkbox" id="checkbox2" />
        <label for="">test2</label>
        <span for="" class="pull-right">33</span>
    </li>
</ul>

<h1> show the content </h1>

<div class="show-content">
    <div id="item1">
        test1
    </div>
    <div id="item2">
        test2
    </div>
</div>
<script>
    $(document).ready(function () {


        $('#checkbox1').on('change', function () {
            var checkbox1 = $('#checkbox1').is(':checked')

            if (checkbox1) {
                $(".show-content > #item1").hide();
            } else {
                $(".show-content > #item1").show();
            }

        });

        $('#checkbox2').on('change', function () {
            var checkbox2 = $('#checkbox2').is(':checked')

            if (checkbox2) {
                $(".show-content > #item2").hide();
            } else {
                $(".show-content > #item2").show();
            }

        });

    })
</script>