jQueryを使用してCSSのCSSを変更するにはをクリックしてください。

Question

tdは、ユーザがtdまたはチェックボックスをクリックすると色を変更しようとしています。今

ユーザーは、CSS tdをクリックした場合変更とチェックボックスがオフに/チェックするでしょう。

ただし、チェックボックスをクリックすると、,は変更されません。。さらに、ページが更新されるとチェックボックスがチェックされますが、CSSはなくなります。

私は間違っていますか？

JSFiddle

<table> 
<tr><td><input type="checkbox" name="my-group[]" value="1">A</td></tr> 
<tr><td><input type="checkbox" name="my-group[]" value="2">B</td></tr> 
<tr><td><input type="checkbox" name="my-group[]" value="3">C</td></tr> 
<tr><td><input type="checkbox" name="my-group[]" value="4">D</td></tr> 
</table> 

<script> 
var chosen = {'background-color': '#9F1313', 'color': '#fff'}; 
var unchosen = {'background-color': 'transparent', 'color': '#000'}; 

$('td').click(function (event) { 
    if (!$(event.target).is('input')) { 
     $('input:checkbox', this).prop('checked', function (i, value) { 
      highlight(this, $(this).closest('td')); 
      return !value; 
     }); 
    } 
}); 

function highlight(cb, cell) { 
    if (cb.checked) { 
     $(cell).css(unchosen); 
    } else { 
     $(cell).css(chosen); 
    } 
} 
</script> 

Answer 1

問題は、しかし、あなたがより良いサポートを持っている、とすることによりシンプルな、コードをよりセマンティックにし、問題を完全に回避することができ、両方の親tdにあるチェックボックスから、イベントバブリングによるものですlabelを使用して、チェックボックスのcheckedの状態に基づいて、親のCSSクラスをtdに切り替えるだけです。これはまた、ダブルトリガーを防ぐ一方で、これはTDとチェックボックスの両方でイベントを結合する私の提案です

$('.table-responsive :checkbox').on('change', function() { 
 
    $(this).closest('td').toggleClass('chosen', this.checked); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<style> 
 
    label { 
 
    display: block; 
 
    font-weight: normal; 
 
    margin: 0; 
 
    } 
 
    
 
    td { 
 
    background-color: transparent; 
 
    color: #000; 
 
    } 
 
    
 
    td.chosen { 
 
    background-color: #9F1313; 
 
    color: #fff; 
 
    } 
 
</style> 
 
<div class="table-responsive"> 
 
    <div class="container"> 
 
    <table class="table table-striped table-hover table-condensed"> 
 
     <tr> 
 
     <td><label><input type="checkbox" name="my-group[]" value="1"> A</label></td> 
 
     </tr> 
 
     <tr> 
 
     <td><label><input type="checkbox" name="my-group[]" value="2"> B</label></td> 
 
     </tr> 
 
     <tr> 
 
     <td><label><input type="checkbox" name="my-group[]" value="3"> C</label></td> 
 
     </tr> 
 
     <tr> 
 
     <td><label><input type="checkbox" name="my-group[]" value="4"> D</label></td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

Answer 2

：これを試してみてください。

$('td').on('click',function(event){ 
    var td = $(this); 
    var checkBox = $(this).find('input:checkbox'); 

    if($(event.target).is('input')){     // checks if event target is checkbox 
     event.stopPropagation();      // prevents triggering click event on TD too 
    } else { 
     checkBox.trigger('click');     // if its TD, triggers checkbox click event 
     return;          // and stop the code 
    } 

    if(checkBox.is(':checked')){      // checks if checkbox is checked! 
     td.css('background-color','red'); 
    } else { 
     td.css('background-color','transparent'); 
    } 

}); 

現在のアクションでそれを見ることができます：https://codepen.io/FaridNaderi/pen/PjVXrm

は、それが、少なくともお役に立てば幸いです。

Answer 3

イベントのバブリングの問題は、クリックイベントにevent.stopImmediatePropagation();を追加したことです。

$('td').click(function(event) { 
event.stopImmediatePropagation(); 
if (!$(event.target).is('input')) { 
$('input:checkbox', this).prop('checked', function(i, value) { 
    highlight(this, $(this).closest('td')); 
    return !value; 
}); 
} 
});