2016-04-08 27 views
0

Şu anda iç içe bir onay kutusunu denemeye çalışıyorum. Ben zaten bir çocuk onay kutusunun ebeveyn onay kutusunu almak için anladım, ama ne olursa olsun denemek için tersi işe yaramıyor. Zaten .Children (ile kendisine çalıştıjQuery: descendants çalışmıyor

), .find() vb, bir onay kutusu daha başka bir şey geldiği zaman çalışır . $ (This) bir onay kutusunun nesnesi olduğunda, bana önceki elemanı vermez. İlk soylu nesnesine nasıl erişebilirim? Teşekkür ederim !

HTML:

<ul class='main'> 
    <li><input type="checkbox" name="settings_overview" value="overview">Settings 
     <ul class="sub"> 
      <li><input type="checkbox" name="delete" value="add">Add device</li> 
      <li><input type="checkbox" name="add" value="delete">Delete device</li> 
     </ul> 
    </li> 
</ul> 

JS:

$(document).ready(function() { 
    $('input:checkbox').click(function() { 

    var child = $(this).find(':first'); // not working 

    var parent = $(this).closest("ul").siblings('input:checkbox'); // works 

    console.log(parent); 
    console.log(child); 

    }); 
}); 

https://jsfiddle.net/v36xyfdn/11/

+1

:

HTML:

<ul class='main'> <li><input type="checkbox" name="settings_overview" value="overview">Settings <ul class="sub"> <li><input type="checkbox" name="delete" value="add">Add device</li> <li><input type="checkbox" name="add" value="delete">Delete device</li> </ul> </li> </ul> 

JS:

$(document).ready(function() { $('input:checkbox').click(function() { var nextUl = $(this).next("ul"); // not working var children = nextUl.find("input:checkbox"); // if the clicked element was the child, then we won't get any children using above method if(children.length == 0){ children = $(this).parents(".sub").find("input:checkbox"); } var parent = $(this).closest("ul").siblings('input:checkbox'); // works // Works //console.log(parent); //console.log(children); // If there's a parent, then that means we're in the child if(parent.length){ var activeChildren = 0; children.each(function(){ if($(this).is(":checked")) activeChildren++; }); if(activeChildren == children.length){ parent.prop("checked", true); } else { parent.prop("checked", false); } } // if the clicked element doesn't have any parent, means we clicked on the parent checkbox if(parent.length == 0){ if($(this).is(":checked")){ children.each(function(){ $(this).prop("checked", true); }); } else { children.each(function(){ $(this).prop("checked", false); }) } } }); }); 

JSFiddle belki bu size ulaşmak çalıştıkları şey ise, değişiklikler yaptık '$ (this)' onay kutusu. '' etiketleri her zaman kendiliğinden kapanır. Soyundan veya çocuk elemanlarından hiç sahip olamazlar. Yani her zaman bir ebeveyne veya en yakın öğeye gitmek zorunda kalacaksın, sonra da buldukları ya da kardeşleri ya da oradan bir şeyler yapacaksın. – David784

+0

'$ (this) .next() bulmak ('input: first');' –

cevap

1

Orada farklı senaryolar vardır ve bu yukarıdaki kodu her zaman çalışmaz, ve yapmanız gerekebilir eğer yoksa geri dönüşler. Senin örnekte https://jsfiddle.net/v36xyfdn/14/

+0

teşekkürler, bu çok yardımcı oldu! –