作为 table 单元格的单选按钮

Question

这是我的 JS：

    $( function() {
  $('td').click( function() {
    $(this).toggleClass("red-cell");
  } );
} );

风格：

td { background: white; cursor: pointer; padding: 2px }
td.red-cell {
    background: #339933; 
}

通过查看 js 最容易解释fiddle。我希望能够单击 table 单元格，如果它是绿色的，则单选按钮 "yes" 被选中，如果再次单击它应该切换到无单选按钮。我目前在狗图片上有单选按钮。一旦它工作，我会更改单选按钮以隐藏...上面的 fiddle 是我对 js 的有限知识所能获得的最接近的。关于我如何实现这一点有什么建议吗？

Answer 1

使用切换不必要地棘手（并且在审查代码时不太清楚weeks/months）。最好明确指定你想要做什么。

jsFiddle Demo

$('td').click( function() {
   var $this = $(this);
   if ( $this.hasClass('red-cell') ){
      $this.removeClass('red-cell');
      $('#radNo').prop("checked", true);
   }else{
      $this.addClass('red-cell');
      $('#radYes').prop("checked", true);
   }
} );

作为 table 单元格的单选按钮

radio button as table cell

javascript

jquery

button

radio