點擊複選框和應用類到它的父

我想如果輸入框被選中的一類適用於鋰元素，但我不能工作了，爲什麼它沒有發生。 HTML和CSS是「別人」，所以我敢肯定有作爲單獨的jQuery的錯誤出現。點擊複選框和應用類到它的父

的HTML是

<ol class="subproduct"> 
<li> 
    <input type="checkbox" name="extra2" value="tested" /> 
    <p class="checkbox"></p> 
    <h3>test <span class="price">5</h3> 
    <p>word words words</p> 
</li> 
<li> 
    <input type="checkbox" name="extra2" value="tested" /> 
    <p class="checkbox"></p> 
    <h3>test <span class="price">5</h3> 
    <p>word words words</p> 
</li> 
<li> 
    <input type="checkbox" name="extra2" value="tested" /> 
    <p class="checkbox"></p> 
    <h3>test <span class="price">5</h3> 
    <p>word words words</p> 
</li> 
<li> 
    <input type="checkbox" name="extra2" value="tested" /> 
    <p class="checkbox"></p> 
    <h3>test <span class="price">5</h3> 
    <p>word words words</p> 
</li>

Jquery的因爲這是

$(document).ready(function() { 
    $('input:checkbox').change(function(){ 
     if($(this).is(":checked")) { 
      $('.subproduct li').addClass("checked"); 
     } else { 
      $('.subproduct li').removeClass("checked"); 
     } 
    }); 
});

我創建了一個小的jsfiddle所有的CSS和HTML - http://jsfiddle.net/sturobson/gG8Qr/

我敢肯定有一些過度特異性什麼？基本上，如果複選框被選中，我想添加/刪除一個類到.subproduct li

但是當前的代碼不起作用。有任何想法嗎？

來源

2013-03-11 Stuart Robson

你必須走下DOM選擇所有.subproduct li元素。使用jQuery父母，下一個或上一個功能這一點。在你的例子中：

$(document).ready(function() { 
    $('input:checkbox').change(function(){ 
     if($(this).is(":checked")) { 
      $(this).parent().addClass("checked"); 
     } else { 
      $(this).parent().removeClass("checked"); 
     } 
    }); 
});

來源

2013-03-11 10:21:01

如果檢查bocx檢查或不...然後如果選中，要添加類所有<li> ..使用parent()獲得特定<li>和..use添加或刪除類你正在檢查.. 使用父（）;

$(document).ready(function() { 
    $('input:checkbox').change(function(){ 
    if($(this).is(":checked")) { 
     $(this).parent().addClass("checked"); 
    } else { 
     $(this).parent().removeClass("checked"); 
    } 
    }); 
});

fiddle here

來源

2013-03-11 10:20:27 bipen

你總是分配類的所有li元素。嘗試僅僅將其分配給使用jQuery parent()，類似這樣的直接養育li：

$(document).ready(function() { 
    $('input:checkbox').change(function(){ 
     if($(this).is(":checked")) { 
      $(this).parent("li").addClass("checked"); 
     } else { 
      $(this).parent("li").removeClass("checked"); 
     } 
    }); 
});

，或者如果你希望它是一個li與否始終指定類的父不管你可以只使用parent()類似如下：

$(document).ready(function() { 
    $('input:checkbox').change(function(){ 
     if($(this).is(":checked")) { 
      $(this).parent().addClass("checked"); 
     } else { 
      $(this).parent().removeClass("checked"); 
     } 
    }); 
});

DEMO - 分配類只於母公司li

來源

2013-03-11 10:20:49 Nope

點擊複選框和應用類到它的父

回答

相關問題