Question

我试图在ul中为一组复选框选择all。我已经成功地进行了切换，但切换并不是我正在寻找的。

<ul class="dropdown-menu" id="filter">
    <li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox" />Test 1</a></li>
    <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox" />Test 2</a></li>
    <li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox" />Test 3</a></li>
</ul>

这是我用来根据复选框操作页面的点击功能的开始

$('#filter >li>a').on('click', function(event) {
    event.preventDefault();
    var $target = $(event.currentTarget),
    val = $target.attr('data-value'),
    $inp = $target.find('input'),
    idx;

从这里开始我尝试制作一个if语句来检查是否选择了all（在示例代码test1中）以及是否选中了它以便代码可以然后选中或取消选中所有其他复选框。

Answer 1

检查输入值以查看它是否是第一个选项。如果是，请在下拉菜单中选择所有输入并检查它们。

＆＃13;

$(document).ready(function() {
  $('#filter >li>a').on('click',
    function(event) {
      event.preventDefault();

      var $target = $(event.currentTarget),
        val = $target.attr('data-value'),
        $inp = $target.find('input'),
        idx;
			
      var isChecked = !$inp.prop('checked');
      if(val == 'option1') {
      	$('.dropdown-menu input').prop('checked', isChecked);
      } else {
         $inp.prop('checked', isChecked);
      }
      
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu" id="filter">
  <li>
    <a href="#" class="small" data-value="option1" tabIndex="-1">
      <input type="checkbox">Test 1</a>
  </li>
  <li>
    <a href="#" class="small" data-value="option2" tabIndex="-1">
      <input type="checkbox">Test 2</a>
  </li>
  <li>
    <a href="#" class="small" data-value="option3" tabIndex="-1">
      <input type="checkbox">Test 3</a>
  </li>
</ul>

＆＃13;

Answer 2

<ul class="dropdown-menu" id="filter">
    <li><a onclick="for(i=1;i<document.
querySelectorAll('#filter a input').length;i++){document.
querySelectorAll('#filter a input')[i].checked=document.
querySelectorAll('#filter a input')[0].checked;}" href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox" id="test1" /><label for="test1">Test 1</label></a></li>
    <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox" id="test2" /><label for="test2">Test 2</label></a></li>
    <li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox" id="test3" /><label for="test3">Test 3</label></a></li>
</ul>

从此：https://stackoverflow.com/a/18537624/6917520

小提琴：https://jsfiddle.net/ayunami2000/z5x4pxk2/3/

检查嵌套在一个标签内的复选框的状态，嵌套在一个li里面，在ul里面

2 个答案: