クリックするとチェックボックスがチェックされません

Question

テーブルとチェックボックスに別の問題があります。私は、テーブルセル内のどこかをクリックすると、チェックボックスをチェックできるようにJavaScriptの動作を確認しています。ただし、チェックボックス自体は機能しません。私はこれを1時間以上解決しようとしましたが、どこでも答えを見つけることはできません。ここに私のjavascriptとそれが操作されたHTMLの抜粋である：ここで

function tdOnclick(td) { 
    for(var i = 0; i < td.childNodes.length; i++) { 
     if(td.childNodes[i].nodeName == "INPUT") { 
      if(td.childNodes[i].checked) { 
       td.childNodes[i].checked = false; 
       td.style.backgroundColor = "#FAF4E3"; 
      } else { 
       td.childNodes[i].checked = true; 
       td.style.backgroundColor = "#E1E1E1"; 
      } 
     } 
    } 
} 

は、テーブルのHTMLの一部です：

<tr> 
    <td><center>9:00 - 10:00</center></td> 
    <td class="tdata" onclick="tdOnclick(this)"><input type="checkbox" name="free" value="mon09"></td> 
    <td class="tdata" onclick="tdOnclick(this)"><input type="checkbox" name="free" value="tue09"></td> 
    <td class="tdata" onclick="tdOnclick(this)"><input type="checkbox" name="free" value="wed09"></td> 
    <td class="tdata" onclick="tdOnclick(this)"><input type="checkbox" name="free" value="thu09"></td> 
    <td class="tdata" onclick="tdOnclick(this)"><input type="checkbox" name="free" value="fri09"></td> 
</tr> 

Answer 1

は実は、私は推測をハザードつもりですそれは働いている。あなたのクリックはチェックボックスにチェックされているので、onClickイベントはチェックを外しています。ここでアイデアです：

<input type="checkbox" name="free" value="mon09" onClick="this.checked=!this.checked;"> 

それは少し汚いですが、それはsucessfullyクリックを無視します。

作業TinkerBin。

Answer 2

私が殴られた男だった場合は、二重のクリックイベントが発生していると思います。 1つは入力用、もう1つは親用です。基本的に2回クリックするだけで、入力を効果的に無効にできます。このpostを読んでください。 このような確率はうまくいくでしょう。

<input type="checkbox" name="free" value="fri09" onclick="return false;" /> 

Answer 3

あなたのクリックは予想通り、その後、TDクリックコードを使用すると、バックオフあなたのチェックボックスを切り替えていると呼ばれているチェックボックスをチェックしています。

ここには何が起こっているのかを示すコメントがあるjsfiddleがあります。 http://jsfiddle.net/NujXv/2/

イベントがチェックボックスからTDにバブリングするのを止める必要があります。私はこれがjquery関数 - http://api.jquery.com/event.stopPropagationを探しているのを発見しました。 jsfiddleにはコメントアウトされた行がありますが、本当のjqueryエクスペリエンスを持っていますので少し調整する必要があります。私は同じ問題にした

Answer 4

：が存在は前のpreventDefaultであれば、どこか「でpreventDefault」を呼び出して、チェックボックスのクリック機能をかどうかをチェックされている場合

チェックがtrueを返すと。

私はこのような何かでそれを解決する：私はもともとjsfiddleでこれを再現するいくつかの問題を抱えて、ので、ここで「作業」のリンクありました

$("#recordlist").click(function(e) { 
    if (e.target.name == 'recordlistitem'){ // When recordlistitem is a checkbox(es) 
     return true; 
    } 
    e.preventDefault(); 
    // other stuff here 
}