選擇具有不確定功能的多個複選框

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