多個複選框選中事件 選中更改父層class樣式
阿新 • • 發佈:2018-12-04
html
<ul class="grid"> <li class="item"> <input type="checkbox" name="check"/> <li class="item"> <input type="checkbox" name="check"/> <li class="item"> <input type="checkbox" name="check"/> <li class="item"> <input type="checkbox" name="check"/>
js
$(function(){ var s = $("input[name='check']"); s.each(function(i) { // alert(i); $(this).click(function(){ if(this.checked==true){ alert(this.value); $(this).parents('.item').attr('class','item active'); } else{ alert(this.value); $(this).parents('.item.active').attr('class','item'); } }); }); })
css
.grid li { margin: 3px; font-size: 14px; float: left; text-align: left; line-height: 150%; border-radius: 10px; border: 1px solid #BFBFBF; box-shadow: 0px 0px 0px 0px #aaa; } .item.active{ -webkit-transition: border linear .2s,-webkit-box-shadow linear .5s; border-color: rgba(141,39,142,.75); -webkit-box-shadow: 0 0 18px rgba(111,1,32,3); z-index: 2; }
單個複選框選中事件
$(function(){
var s = $("input[id='grewshow']");
s.each(function(i) {
// alert(i);
$(this).click(function(){
if(this.checked==true){
$("#jqxx-tab").show();
}
else{
$("#jqxx-tab").hide();
}
});
});
})