Question

我正在http://css-tricks.com/examples/IndeterminateCheckboxes/上实现一个小脚本但我的html包含一个<a>标签作为复选框的父级，所以这导致了问题。我不知道如何解决它。

<ul>
    <li"><a href="#"><input type="checkbox" >1 </a>
        <ul>
            <li><a href="#"><input type="checkbox">1.1</a></li>
        </ul>
    </li>
    <li><a href="#"><input type="checkbox" >2 </a>
        <ul>
             <li><a href="#"><input type="checkbox" >2.1</a>
                <ul>
                    <li><a href="#"><input type="checkbox" >2.1.1</a></li>
                    <li><a href="#"><input type="checkbox" >2.1.2</a></li>
                    <li><a href="#"><input type="checkbox">2.1.3</a></li> 
                </ul>
            </li>
        </ul>
    </li>
</ul>

我的脚本是

<script>
$(function() {
  // Apparently click is better chan change? Cuz IE?
  $('input[type="checkbox"]').change(function(e) {
  var checked = $(this).prop("checked"),
      container = $(this).parent().parent(),
      siblings = container.siblings();
  container.find('input[type="checkbox"]').prop({
      indeterminate: false,
      checked: checked
  });
 function checkSiblings(el) {
      var parent = el.parent(),
          all = true;
      console.log(parent);
      el.siblings().each(function() {
           all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
          console.log(all);
          return all;
      });

      if (all && checked) {
          parent.children('input[type="checkbox"]').prop({
              indeterminate: false,
              checked: checked
          });
          checkSiblings(parent);
      } else if (all && !checked) {
          parent.children('input[type="checkbox"]').prop("checked", checked);
          parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
          //console.log("thi sis ");
          checkSiblings(parent);
      } else {
          el.parents("li").children('input[type="checkbox"]').prop({
              indeterminate: true,
              checked: false
          });
          console.log("apple");
      }
    }


    checkSiblings(container);
  });
});
</script>

Answer 1

您可能希望从输入周围删除这些<a>标记。如果你把链接href作为复选框的数据属性，你仍然可以通过输入链接用户jQuery：

HTML

<input type="checkbox" data-href="#myUrl" />

JS

$('input[type="checkbox"]').click(function() {
    location.href = $(this).data('href');  
});

Answer 2

我找到了解决方法。问题是儿童输入框很难找到。现在，如果列表中包含标签，则下面的代码将起作用。

$(function() {
  // Apparently click is better chan change? Cuz IE?
  $('input[type="checkbox"]').change(function(e) {
  var checked = $(this).prop("checked"),
      container = $(this).closest("li"),
      siblings = container.siblings();
      container.find('input[type="checkbox"]').prop({
      indeterminate: false,
      checked: checked
  });
      if(checked)
      {
                  var value= $(this).val();
                  loadMarkers();
                  console.log(value);


      }
  function checkSiblings(el) {
      //console.log(el);
      var parent = el.parent().parent(),
          all = true;
      el.siblings().each(function() {
          return all = ($(this).children().children().closest('input[type="checkbox"]').prop("checked") === checked);
      });

      if (all && checked) {
          parent.children().children().closest('input[type="checkbox"]').prop({
              indeterminate: false,
              checked: checked
          });
          checkSiblings(parent);
      } else if (all && !checked) {
          parent.children().children().closest('input[type="checkbox"]').prop("checked", checked);
          parent.children().children().closest('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
          checkSiblings(parent);
      } else {
          el.parents("li").children().children().closest('input[type="checkbox"]').prop({

// el.parents（ '输入[类型= “复选框”]'）。丙（{ //el.parents("li“）。孩子（）。找到（ '输入[类型= ”复选框“]'）。丙（{ 不确定的：是的，选中：false }）; } }

    checkSiblings(container);
  });
});

选择具有不确定功能的多个复选框

2 个答案: