web-dev-qa-db-ja.com

JavaScriptで呼び出されるHTMLチェックボックスonclick

コードの特定の部分を動作させる方法を見つけようとして少し苦労しています。

<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" onclick="selectAll(document.wizard_form, this);">
<label for="check_all_1" onclick="toggleCheckbox('check_all_1'); return false;">Select All</label>

これは私のHTMLであり、正常に機能します（テキストをクリックするとボックスがクリックされます）。それのjavascriptは非常に簡単です：

function toggleCheckbox(id) {
    document.getElementById(id).checked = !document.getElementById(id).checked;
}

ただし、チェックボックスをクリックするラベルがラベルの場合に、入力に対してonclickが発生するようにします。この時点では、onClick jsは実行されません。これを行う方法に関する1つの提案は何ですか？入力のonclickをラベルのonclickに追加しようとしましたが、うまくいきません。

どんな提案/解決策も素晴らしいでしょう。

javascriptinputcheckboxlabelonclick
40
Craig

checkboxintoをlabelに入れて、チェックボックスのラベルを自動的に「クリックセンシティブ」にし、チェックボックスにonchangeイベントを与えるとどうでしょうか。

<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....> 

function toggleCheckbox(element)
 {
   element.checked = !element.checked;
 }

さらに、キーボードを使用してチェックボックスを切り替えるユーザーをキャッチしますが、onclickはそうではありません。

62
Unicron

Onclickのないラベルは期待どおりに動作します。入力を変更します。ラベルをクリックしたときにselectAll()を実行するのが大歓迎です。次に、onclickラベルにすべて選択を追加します。または、入力をラベルにラップし、ラベルにのみonclickを割り当てます

<label for="check_all_1" onclick="selectAll(document.wizard_form, this);">
  <input type="checkbox" id="check_all_1" name="check_all_1" title="Select All">
  Select All
</label>
2
gblazex

jQueryには、これを行うことができる関数があります。

  1. 次のスクリプトを頭に入れてください。

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

    （または、jQuery.jsファイルをオンラインでダウンロードし、ローカルに含めるだけです）

  2. このスクリプトを使用して、入力がクリックされたときにチェックボックスを切り替えます。

    var toggle = false;
$("#INPUTNAMEHERE").click(function() {
        $("input[type=checkbox]").attr("checked",!toggle);
        toggle = !toggle;
});

あなたがやろうとしていることを理解していれば、それはあなたが望むことをするはずです。

0
rownage

次のように、HTMLからイベントコードを抽出することもできます。

<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" />
<label for="check_all_1">Select All</label>

<script>
function selectAll(frmElement, chkElement) {
    // ...
}
document.getElementById("check_all_1").onclick = function() {
    selectAll(document.wizard_form, this);
}
</script>
0
mexique1