如何通过使用 jQuery 单击来更改单元格颜色？

Question

我很难解决这个问题，因为我不是前端程序员，我有一个表格，行是我的客户，列是一年中的十二个月，每个单元格只有一个复选框，当我单击该复选框时，我需要单元格颜色从红色变为蓝色，我做到了，但仅适用于一月...

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    function countDouble(id) {      
        var d = $(".check-"+id+"-id-<?php echo $dado->idCliente; ?>").is(':checked');

        if (d === true) {
            $(".celula-"+id+"-id-<?php echo $dado->idCliente; ?>").prop("disabled",true).addClass('check-azul');
        } else {
            $(".celula-"+id+"-id-<?php echo $dado->idCliente; ?>").prop("disabled",false).removeClass('check-azul');
        }
        
    }

    jQuery(document).ready(function() { 
        $('input[type=checkbox]').click( function() {
            var id = $('input[type=checkbox]').attr('id');
            countDouble(id);
        });
    });
});//]]>  

</script>

<tr>
        <td>
            <?php echo $dado->idCliente; ?>
        </td>
        <td>
            <?php echo $dado->nomeCliente; ?> <br>
            R$ <?php echo $dado->mensalidade; ?>,00 <br>
            Vence: <?php echo $dado->vencimento; ?>
        </td>
        <?php if($dado->ano == date("Y") && $dado->mes == '1'){ ?>
        <td class="check-meses check-vermelho check-azul celula-1-id-<?php echo $dado->idCliente; ?>">
            Janeiro <br>
            <input type="checkbox" id="1" class="check-1-id-<?php echo $dado->idCliente; ?>" name="janeiro" value="1" checked>
            <?php }else{ ?>
        <td class="check-meses check-vermelho celula-1-id-<?php echo $dado->idCliente; ?>">
            Janeiro <br>
            <input type="checkbox" id="1" class="check-1-id-<?php echo $dado->idCliente; ?>" name="janeiro" value="1">
        <?php } ?>
        </td>
        <?php if($dado->ano == date("Y") && $dado->mes == '2'){ ?>
        <td class="check-meses check-vermelho check-azul celula-2-id-<?php echo $dado->idCliente; ?>">
            Fevereiro <br>
            <input type="checkbox" id="2" class="check-2-id-<?php echo $dado->idCliente; ?>" name="fevereiro" value="2" checked>
            <?php }else{ ?>
        <td class="check-meses check-vermelho celula-2-id-<?php echo $dado->idCliente; ?>">
            Fevereiro <br>
            <input type="checkbox" id="2" class="check-2-id-<?php echo $dado->idCliente; ?>" name="fevereiro" value="2">
        <?php } ?>
        </td>
        <td class="check-meses">
            Março <br>
            <input type="checkbox" name="janeiro">
        </td>
        <td class="check-meses">
            Abril <br>
            <input type="checkbox" name="janeiro">
        </td>
        <td class="check-meses">
            Maio <br>
            <input type="checkbox" name="janeiro">
        </td>
        <td class="check-meses">
            Junho <br>
            <input type="checkbox" name="janeiro">
        </td>
        <td class="check-meses">
            Julho <br>
            <input type="checkbox" name="janeiro">
        </td>
        <td class="check-meses">
            Agosto <br>
            <input type="checkbox" name="janeiro">
        </td>
        <td class="check-meses">
            Setembro <br>
            <input type="checkbox" name="janeiro">
        </td>
        <td class="check-meses">
            Outubro <br>
            <input type="checkbox" name="janeiro">
        </td>
        <td class="check-meses">
            Novembro <br>
            <input type="checkbox" name="janeiro">
        </td>
        <td class="check-meses">
            Dezembro <br>
            <input type="checkbox" name="janeiro">
        </td>
    </tr>

Answer 1

我猜你的代码仅适用于第一个复选框的原因是这一行：

var id = $('input[type=checkbox]').attr('id');

它返回第一个复选框的 ID，而不是最近单击的复选框的 ID。尝试用这一行替换它：

var id = $(this).attr('id');

Answer 2

$(document).ready(function() {
  $('td').on('click', function() {
    $(this).css('background-color', 'lightgray');
  });
});

td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Cell</td>
    <td>Cell</td>  
    <td>Cell</td>
    <td>Cell</td>  
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>  
    <td>Cell</td>
    <td>Cell</td>  
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>  
    <td>Cell</td>
    <td>Cell</td>  
  </tr>
</table>

Answer 3

http://jsfiddle.net/9etqyb84/

HTML

<table>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <input type="checkbox">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <input type="checkbox">
        </td>
    </tr>
</table>

JS

$(document).ready(function(){
    $('input[type=checkbox]').on('click', function(){
        // detect if is checked or unchecked when this click is performed
        var checkedStatus = $(this).prop('checked'); // true or false

        if( checkedStatus ) {
            $(this).parent('td').css('background-color', 'blue');
        } else {
            $(this).parent('td').css('background-color', 'red');
        }
    })
}); 

CSS

table tr td {
    border: 1px solid #000;
    padding: 5px;
    background-color: red;
}