复选框选择上的文本删除线

Question

我知道这个问题已经被问过多次，但我无法让它工作，我有一个表格循环遍历一个集合，每行都有一个复选框，我想删除描述的文本复选框被选中？？？？？？。感谢您的帮助！

表格

    <table class="table table-striped">
    <tr><th>Task Description</th><th>Completed</th>
    @if (Model.ListOfTasks.Count() == 0)
    {
        <tr><td colspan="3" class="text-center">No Tasks</td></tr>
    }
    else
    {
        foreach (var task in Model.ListOfTasks)
        {
            <tr>
                @Html.HiddenFor(x => x.TaskID)                
                <td><span>@task.Description</span></td>
                <td>

                    @using (Html.BeginForm("Complete", "Task", new { id = task.TaskID }))
                    {
                        <input type="checkbox" id="checkbox" />
                    }

                </td>                
                <td>
                    @using (Html.BeginForm("Delete", "Task", new { id = task.TaskID }))
                    {
                      <button class="btn btn-danger btn-xs" type="submit">Remove</button>
                    }
                </td>
            </tr>
        }
    }
</table>

<a href="#" onclick="ShowTaskPopup()" class="btn btn-primary">Add</a>

<div class="modal fade" id="popupTaskForm" style="display: none;">
    <div class="modal-header">Add New Task</div>
    <div class="modal-body">

    @Html.ValidationSummary(false)
    @using (Html.BeginForm("Create", "Task", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()

        <form class="well">
            <fieldset>
                <table class="table-condensed">                    
                    <tr class="strikeout">
                        <td><label>Task Name</label></td>
                        <td>@Html.TextBoxFor(x => x.TaskName, new { @class = "form-control" })</td>

                        <td><label>Description</label></td>
                        <td>@Html.TextBoxFor(x => x.Description, new { @class = "form-control" })</td>
                    </tr>
                 </table>
                <button type="submit" class="btn btn-primary">Submit</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
              </fieldset>
        </form>           
     }
    </div>
    </div>

jQuery

  $('#checkbox').change(function () {

            if (this.checked) {
                $(this).parent().parent().css("text-decoration","line-through");
            } else {
                $(this).parent().parent().css("text-decoration", "none");
            }
        });

Answer 1

Razor 将在您的复选框周围添加 <form> 标签，因此您将 css 应用于包含复选框的 <td>，而不是您可能认为的父行 parent().parent();

尝试使用最近的选择器向上遍历dom树并找到父行：

$(this).closest("tr").css("text-decoration","line-through");

Answer 2

I want to strike-through the text of the when the check box is selected????? 的 ？我猜你的意思是 description 。我为你的代码做了一个简单的例子，所以你可以看到它的工作原理。

问题在于 HTML 。因为您为复选框设置了相同的 id，所以 jq 仅适用于其中一个。重复的 iD 会导致此类问题。我用 classes 替换了 id's 。见下文

（尝试在 jQuery 中更改为 #，您会发现它不再适用于两个复选框）

 $('.checkbox').change(function() {

   if (this.checked) {
     $(this).parent().parent().css("text-decoration", "line-through");
   } else {
     $(this).parent().parent().css("text-decoration", "none");
   }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Strike me through</td>
    <td>
      <input type="checkbox" id="checkbox" class="checkbox" />
    </td>
  </tr>
  <tr>
    <td>Strike me through</td>
    <td>
      <input type="checkbox" id="checkbox" class="checkbox" />
    </td>
  </tr>
</table>

Answer 3

这是适合您的解决方案。但是在这两种情况下你都必须使用class 而不是ID 或者你可以使用[type="checkbox"] 但在意见类中更适合定位元素，这些是我认为合适的两种解决方案，ty

1#

 $('.checkbox').change(function() {

   if (this.checked) {
     $(this).closest('tr').find('td:nth-child(1)').css("text-decoration", "line-through");
   } else {
     $(this).closest('tr').find('td:nth-child(1)').css("text-decoration", "none");
   }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><span>@task.Description</span></td>
    <td>
      <input type="checkbox" id="checkbox" class="checkbox" />
    </td>
  </tr>
  <tr>
    <td><span>@task.Description</span></td>
    <td>
      <input type="checkbox" id="checkbox" class="checkbox" />
    </td>
  </tr>
</table>

2#

 $('.checkbox').change(function() {

   if (this.checked) {
     $(this).closest('tr').find('td>span').css("text-decoration", "line-through");
   } else {
     $(this).closest('tr').find('td>span').css("text-decoration", "none");
   }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><span>@task.Description</span></td>
    <td>
      <input type="checkbox" id="checkbox" class="checkbox" />
    </td>
  </tr>
  <tr>
    <td><span>@task.Description</span></td>
    <td>
      <input type="checkbox" id="checkbox" class="checkbox" />
    </td>
  </tr>
</table>

Answer 4

这里有一个示例代码可以帮助你：

$("input[type='checkbox']").on('change', function() {
  if ($(this).is(":checked")) {
    $(this).parent().parent().css({
      'text-decoration': 'line-through',
      'color': 'red'
    })
  } else {
    $(this).parent().parent().css({
      'text-decoration': 'none',
      'color': '#000'
    })
  }
});

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