从标记中移除一个类

本文关键字：一个 | 更新日期: 2023-09-27 18:09:10

所以我有一点javascript的问题。

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

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

这是屏幕:https://i.stack.imgur.com/cMdiW.jpg

这就是生成标记的方式

<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;
    }

谢谢。

从标记中移除一个类

您需要将e作为处理程序函数的参数。此外，您可以直接使用toggleClass，而不是执行所有这些检查。

$('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);
  }
});
td.selected {
  background-color: red;
}
<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>

尝试在checkbox上绑定一个更改事件:

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


$(':checkbox').change(function(){
    $(this).closest('td').toggleClass('selected');
});
.selected{background:yellow;}
<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>

相关文章：