1

セクション付きのサイドバーがあり、各セクション内にチャプターがあり、その中にサブチャプターがあります。チャプターとサブチャプターは、チェックボックスを使用して既読としてマークされます。私がやろうとしていることは：

  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/

4

1 に答える 1

3

私はこれを以下を使用して機能させました：

$(".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どこにも使用されていないので変数を削除しました
于 2013-03-23T18:10:39.303 に答える