javascript - CoffeeScript 嵌套复选框

Question

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

1. 每当我将章节复选框标记为已选中时，在其标签上加上一行，并且所有子章节复选框也会被选中。

2. 每当我取消标记章节复选框时，通行消失，所有子章节复选框都未标记，并且它们的通行消失。

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

$(".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变量，因为我没有看到它在任何地方使用