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

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>标签。您仍然可以通过使用jQuery的输入链接的用户，如果你把链接的href为复选框的像这样的数据属性：

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('input[type="checkbox“]'）。丙（{ //el.parents("li").children().find('input[type 。= “复选框”]'）丙（{ 不确定：真， 检查：假 }）; } }

checkSiblings(container); 
    }); 
});