Jquery 复选框选中和未选中事件

Question

我在 html 中开发了一个代码，其中复选框由 jquery 管理。

<tr>
    <td>
      <div class="checkbox">
        <label><input type="checkbox" id="checkbox2"></label>
      </div>
    </td>

    <td><p id="taks2">Task 2</p></td>

    <td><span class="glyphicon glyphicon-trash"></span></td>        
  </tr>

jquery脚本是这样的：

<script>
    $(document).ready(function(){
        $('#checkbox2').click(function(){
            if($(this).is(":checked")){

                $('#taks2').replaceWith('<s>' + $('#task2').text() + '</s>');


            }
            else if($(this).is(":not(:checked)")){

            }
        });
    });
</script>

如果复选框被用户选中，则 "Task 2" 应转换为 ~~Task~~（使用 del 或 strike 标记后输出），如果复选框未选中，则它应该再次转换为以前的形式，如 "Task 2".

Answer 1

您可以使用 css class 在选中和取消选中复选框时添加和删除：

$(document).ready(function(){
  $('#checkbox2').click(function(){
      if($(this).is(":checked")){
        $('#taks2').addClass('strike');
      } else {
        $('#taks2').removeClass('strike');
      }
  });
});

.strike{
  text-decoration: line-through;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <div class="checkbox">
      <label><input type="checkbox" id="checkbox2"></label>
    </div>
  </td>

  <td><p id="taks2">Task 2</p></td>

  <td><span class="glyphicon glyphicon-trash"></span></td>        
</tr>

您还可以使用 toggleClass() 来缩短代码，例如：

$(document).ready(function(){
  $('#checkbox2').click(function(){
      var isChecked = $(this).is(":checked");
      $('#taks2').toggleClass('strike', isChecked);
  });
});

.strike{
  text-decoration: line-through;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <div class="checkbox">
      <label><input type="checkbox" id="checkbox2"></label>
    </div>
  </td>

  <td><p id="taks2">Task 2</p></td>

  <td><span class="glyphicon glyphicon-trash"></span></td>        
</tr>

Answer 2

您只需使用 CSS 即可达到此效果，使用选择器更改 :selected 的下一个 label 的样式 checkbox:

input[type='checkbox']:checked + label {
  text-decoration: line-through;
}

<div class="checkbox">
   <input type="checkbox" id="checkbox1" /><label>Task 1</label>
</div>
<div class="checkbox">
   <input type="checkbox" id="checkbox2" /><label>Task 2</label>
</div>

Jquery 复选框选中和未选中事件

Jquery checkbox checked and unchecked events

html

javascript

css

jquery

jquery-plugins