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（）的父行。）;

尝试使用最近的选择器遍历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导致了这种问题。我用类替换了id。见下文

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

以下是适合您的解决方案。但是，你必须使用class而不是ID，或者你可以使用[type="checkbox"]但是在意见类中更适合定位元素，这些是我心目中适当的2个解决方案，ty < / p>

<强> 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>

复选框选择上的文本删除

4 个答案: