按鈕隨複選框選中與取消變換樣式

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