2019獨角獸企業重金招聘Python工程師標準>>>

<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>
?

轉載于:https://my.oschina.net/u/2612473/blog/1457011

總結

以上是生活随笔為你收集整理的按钮随复选框选中与取消变换样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。