Question

我有一个带有部分的侧边栏，每个部分内都有章节，其中有子章节。使用复选框将章节和子章节标记为已读。我想做的是：

每当我选中一个章节复选框时，在其标签上放一条线，并检查所有子章节复选框以及一条直线。
每当我取消标记章节复选框时，直线消失并且所有子章节复选框都没有标记，并且它们的直线消失。

我一直试图让它工作一段时间，但没有成功，任何帮助将不胜感激。感谢。

$(".chapter-ended").live "change", ->
  id = $(this).attr("id")
  isChecked = $(this).attr("checked")
  if(isChecked)
    $(this).closest('li').css "text-decoration", "line-through"
  else
    $(this).closest('li').css "text-decoration", "none"


$(".subchapter-ended").live "change", ->
  id = $(this).attr("id")
  isChecked = $(this).attr("checked")
  if(isChecked)
    $(this).closest('li').css "text-decoration", "line-through"
  else
    $(this).closest('li').css "text-decoration", "none"

http://jsfiddle.net/MWHML/1/

Answer 1

我使用以下方法工作：

$(".chapter-ended").on "change", ->
  isChecked = $(this).is(':checked')
  $(this).closest('li').find('li input[type="checkbox"]').prop('checked', isChecked);
  if(isChecked)
    $(this).closest('li').css "text-decoration", "line-through"
  else
    $(this).closest('li').css "text-decoration", "none"


$(".subchapter-ended").on "change", ->
  isChecked = $(this).is(':checked')
  $(this).closest('li').find('li input[type="checkbox"]').prop('checked', isChecked);
  if(isChecked)
    $(this).closest('li').css "text-decoration", "line-through"
  else
    $(this).closest('li').css "text-decoration", "none"

我做了以下更改：

.on()代替.live()用于事件处理程序
.is(':checked')而不是.attr('checked')，以查看是否选中了复选框
使用.prop('checked', isChecked)
删除id变量，因为我没有看到它被用于任何地方

CoffeeScript嵌套复选框

1 个答案: