Question

所以我对javascript有点问题。

我想检查复选框并在点击时更改单元格的背景颜色并删除颜色，如果用户再次点击它，则取消选中该复选框。

到目前为止，我已经能够改变颜色，如果一个人点击超链接，下面的javascript是我认为它将沿着这条线的更新版本。

这是标记的生成方式

<asp:TableCell Width="100%" ColumnSpan="2">                                
      <div id="checkboxes">
           <table width="100%" border="1">
                %foreach (var qv in rs)
                 {
                   var checkid = "chk" + qv.id;
                   var tdid = "td" + qv.id;                                                                                           
                 %
                 <tr>
                    <td width="100%">  
                       <a href="#/">                       
                       <input type="checkbox" value="@qv.id" name="<%=qv.id%>" />
                       <textbox><%=qv.text%></textbox>   
                       </a>                     
                    </td>                                            
                 </tr>
                <%}%>
        </table>
  </div>                                   
</asp:TableCell>

这是迄今为止我尝试过的javascript和风格

 $("a").click(function () {
            if($(this).parent().hasClass("selected")==true)
            {
                $(this).parent().removeClass("selected");
                e.preventDefault();
            }                    
            else
            {
                $(this).parent().addClass("selected");
                e.preventDefault();
            }                
        });

式

td.selected {
        background-color: red;
    }

谢谢。

Answer 1

您需要将e作为处理函数的参数。此外，您只需使用toggleClass而不是进行所有检查。

＆＃13;

$('a').click(function(e) {
  e.preventDefault();
  $(this).parent().toggleClass('selected');
  var checkbox = $(this).find('input[type="checkbox"]');
  var isChecked = checkbox.prop('checked');
  if (isChecked) {
    checkbox.prop('checked', false);
  } else {
    checkbox.prop('checked', true);
  }
});

＆＃13;

td.selected {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="1">
  <tr>
    <td width="100%">
      <a href="#/">
        Select Me
        <input type="checkbox">
      </a>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

尝试在checkbox本身绑定更改事件：

$(':checkbox').change(function(){
    $(this).closest('td').toggleClass('selected');
});

＆＃13;

$(':checkbox').change(function(){
    $(this).closest('td').toggleClass('selected');
});

＆＃13;

.selected{background:yellow;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <a href='#'>
        <input type='checkbox'>
      </a>
    </td>
  </tr>
</table>

＆＃13;

从标记中删除类

2 个答案: