检查复选框状态嵌套在一个标签中，嵌套在LI中，在UL内

Question

我正在尝试为UL中的一组复选框做一个选择。我已经成功制作了一个切换，但切换并不是我要寻找的。

<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语句，以检查是否选择了所有（在示例代码test1中）以及检查是否已检查，以便代码可以检查或取消选中所有其他复选框。

Answer 1

<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/

Answer 2

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

$(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);
      }
      
    });
});

<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>