Jquery checkbox 全選/反全選問題!!!

jquery jquery3.1.1 javasc

小哈 2018-11-30 15:48:56 ‧ 3712 瀏覽

分享至

請問前輩們Jquery一些問題,目前有兩個Checkbox,一個全選/全取消,一個反全選,全選/全取消目前功能是OK,反全選程式碼的地方為什麼無法讓TD顏色無法呈現紅色還有功能似乎也有些問題...

<html>  
    <head>  
        <title>Excel自核資料刪除(For產線)</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
        
    </head>  
	
	
    <body>  
        <div class="container">  
            <br />
   <div class="table-responsive">  
    <h3 align="center">Excel自核資料刪除(For產線)</h3><br />
    <div class="table-responsive">
                    <table class="table table-bordered" id="tbl">
                        <thead>
                        <tr>
                            <th width="210px" align="center">
							<input type="checkbox" id="invertChecked"  class="btn btn-danger btn-xs">反選
							<input type="checkbox" name="delete_all1" id="delete_all1" class="btn btn-danger btn-xs" />
							<button type="刪除" name="delete_all" id="delete_all" class="btn btn-danger btn-xs"><?echo "&nbsp";?>刪除<?echo "&nbsp";?></button>
							工號<?echo "&nbsp";?>
							
				
							
	                        
                            							
							
							
							</th>
							
                            <th width="" align="center">部門</th>
                            <th width="" align="center">中文姓名</th>
                            <th width="" align="center">英文姓名</th>
                            <th width="" align="center">考核區間</th>
                            <th width="" align="center">工作態度</th>
                            <th width="" align="center">工作績效</th>
                            <th width="" align="center">工作品質</th>
                            <th width="" align="center">本質技能</th>
                            <th width="" align="center">總分</th>
                            <th width="" align="center">實際狀況</th>	
                            <th width="" align="center">權限值</th>	
                            <th width="" align="center">隸屬</th>								
                        </tr>
                        </thead>
						<tbody>
                        <?php
                        for($i=1;$i<=mysql_num_rows($data);$i++)
						{
                         $rs=mysql_fetch_row($data);
							
                            echo '
                            <tr>
                                <td>
                                    <input type="checkbox" name="del[]" id="del[]" class="delete_checkbox" value="'.$rs[0].'" />'.$rs[0].'
                                </td>
                                <td align="center">'.$rs[1].'</td>
                                <td align="center">'.$rs[2].'</td>
                                <td align="center">'.$rs[3].'</td>
                                <td align="center">'.$rs[4].'</td>
                                <td align="center">'.$rs[5].'</td>
                                <td align="center">'.$rs[6].'</td>
                                <td align="center">'.$rs[7].'</td>
                                <td align="center">'.$rs[8].'</td>
                                <td align="center">'.$rs[9].'</td>
                                <td align="center">'.$rs[10].'</td>		
                                <td align="center">'.$rs[11].'</td>	
                                <td align="center">'.$rs[13].'</td>									
								
                            </tr>
                            ';
                        }
                        ?>
						</tbody>
                    </table>
                </div>
   </div>  
  </div>
    </body>  
</html> 
<style>
.hilite {
    background-color: #FF0000;
}


.removeRow
{
    background-color: #FF0000;
    color:#FFFFFF;
}
</style>
<script>  

	
	
var $tbl = $('#tbl');
var $bodychk = $tbl.find('tbody input:checkbox');

$(function () {
    $bodychk.on('change', function () {
        if($(this).is(':checked')) {
            $(this).closest('tr').addClass('hilite');
        }
        else {
            $(this).closest('tr').removeClass('hilite');
        }
    });

    $tbl.find('thead input:checkbox').change(function () {
        var c = this.checked;
        $bodychk.prop('checked', c);
        $bodychk.trigger('change'); 
    });
});
	

 $(document).ready(function(){ 

    $('.delete_checkbox').click(function(){
        if($(this).is(':checked'))
        {
            $(this).closest('tr').addClass('hilite');
        }
        else
        {
            $(this).closest('tr').removeClass('hilite');
        }
    });

    $('#delete_all').click(function(){
        var checkbox = $('.delete_checkbox:checked');
        if(checkbox.length > 0)
        {
            var checkbox_value = [];
            $(checkbox).each(function(){
                checkbox_value.push($(this).val());
            });

            $.ajax({
                url:"delete.php",
                method:"POST",
                data:{checkbox_value:checkbox_value},
                success:function()
                {
                    $('.removeRow').fadeOut(1500);
                }
            });
        }
        else
        {
            alert("刪除選取方塊一定要選取");
        }
    });

});  


$('#invertChecked').change(function(){
        if($(this).is(':checked')){
            $('#del[]').children(':checkbox').each(function(){
            $(this).prop('checked',$(this).is(':checked')?false:true);
            
            });
        }
});

</script>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2018-11-30 16:33:19

其實，如果你只是單單要處理顯示色的問題。
可以不需要js來幫你處理。

只要css就行了。不過的確，因為你是用table架構的。在css編寫上倒是有些難度就是了。

這邊就用你的class代替吧來處理吧

一般來說，我並不會將有選跟沒選區分兩個。
我會另外多一個sel來處理

class在未選擇的情況下一直維持在 hilite
只有在選擇時，才去加入一個sel。也就是removeRow。
你放心，大多數者是後蓋前。(雖然在某些瀏覽器也是怪怪的)

一般其實有時我會偷偷的用屬性。而不用class的方式處理就是了。

也就是說，不要去做成切換class的方式。去改用，加入新的class或屬性變動的處理方式。
反而會比較容易操作

回應 1
分享
檢舉

小哈 iT邦新手 4 級 ‧ 2018-12-03 10:45:48 檢舉

大大,有個範例可以指點一下小弟嗎...

登入發表回應

耿直小伙

iT邦新手 1 級 ‧ 2018-12-27 11:03:45

關鍵代碼在這裡，請參考。

<script>
$(document).ready(function(){
  
    // 模擬已選取最後一行
    $('input[name="del[]"]:last').prop('checked', true);
    $('tr:last').addClass('hilite');
    
    // 反選
    $('#invertChecked').click(function() {
      $('input[name="del[]"]').each(function(i, v) {
        var ele = $(v);
        var isCheck = !ele.prop('checked');

        // 邏輯為已選取的轉為未選取，未選取的轉為已選取
        ele.prop('checked', isCheck);
        ele.closest('tr').toggleClass('hilite', isCheck);
      });
    });
  });
});
</script>

若有其他疑問可以到這邊詢問
Aka程式狗