按钮随复选框选中与取消变换样式 原
按钮随复选框选中与取消变换样式 原
<tr>
<td>
<input type="checkbox" value="1" />
</td>
<td>名称</td>
<td>单位名称</td>
<td class="lastcolumn">
<a href="#" onclick="">
<button class="btn btn-warning btn-xs" type="button" id="btDelete"><i class="fa fa-remove"></i>停用</button>
</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="0" />
</td>
<td>名称</td>
<td>单位名称</td>
<td class="lastcolumn">
<a href="#" onclick="">
<button class="btn btn-warning btn-xs" type="button" id="btDelete"><i class="fa fa-remove"></i>停用</button>
</a>
</td>
</tr>//$("input:checkbox[value='1']").attr("checked","checked"); //首先根据后台传进来的value值来设置初始状态为选择还是不选中，如果value为1设置checked为true,注意true不要加引号，并找到最后一列改变class,如果值为0 改变class与html内容 //为checkbox加change事件 如果存在checked属性执行更换class,变化内容，设置checked为false,如果不存在checked属性则执行相应的代码。注意if里面要if($(this).attr("checked")不能写成if($(this).attr("checked")==true)
$("input:checkbox").each(function(i,n){
var value = $(this).attr("value");
if(value=="1"){
$(this).attr("checked",true);
$(this).parent().siblings("td:last-child").find("button").removeClass("btn-warning").addClass("btn-info");
}else if(value=="0"){
//$(this).attr("checked",false);
$(this).parent().siblings("td:last-child").find("button").removeClass("btn-info").addClass("btn-warning");
$(this).parent().siblings("td:last").find("button").html("<i class='fa fa-eye'></i>启用")
}
})
$("input:checkbox").change(function(){
if($(this).attr("checked")){
$(this).parent().siblings("td:last").find("button").removeClass("btn-info").addClass("btn- warning");
$(this).parent().siblings("td:last").find("button").html("<i class='fa fa-eye'></i>启用")
$(this).attr("checked",false);
//$(this).attr("value")=0;
}else if(!$(this).attr("checked")){
$(this).parent().siblings("td:last").find("button").removeClass("btn-warning").addClass("btn-info");
$(this).parent().siblings("td:last").find("button").html("<i class='fa fa-remove'></i>停用")
$(this).attr("checked",true);
}
}) first与first-child区别
$("ul li:first") //选取第一个 <ul> 元素的第一个 <li> 元素
注意在样式中没有ul li:first这种写法
$("ul li:first-child") //选取每个 <ul> 元素的第一个 <li> 元素
<table> <tr><td>Row 1</td></tr> <tr><td>Row 2</td></tr> <tr><td>Row 3</td></tr> </table>
<script>
$("td:first-child").css("color", "red"); //三个Row都为红色
$("td:first").css("color", "red"); //Row1为红色
</script>
(adsbygoogle = window.adsbygoogle || []).push({});
腾讯云开发者
