web-dev-qa-db-ja.com

JQueryはクリックイベントをチェックボックスにバインドします

これが私のhtmlがどのように見えるかの基本的な見方です：

_<form>
  <div id="part1">
     // some html form elements including checkboxes
  </div>
  <div id="part2">
    // more html code with more checkboxes
  </div>
  <div id=part2">
     // data table with numerous checkboxes built dynamically
  </div
</form>
_

私がする必要があるのは、.click()イベントをパート1、2、および3のチェックボックスに個別にバインドすることです。この$('#part1:checkbox').click(...)を試しましたが、うまくいきませんでした。 $("form :checkbox").click(...)を使用すると、同じクリックイベントが1つのセットだけでなく、すべてのチェックボックスにバインドされます。これらをどのように分離しますか？

jquerybind
9
iJared

もうすぐです。子孫セレクターを区切るためのスペースが必要です。

$('#part1 :checkbox').click(function(){
    // code goes here
});

パフォーマンスを向上させるには、次のように使用します。

$('#part1 input[type=checkbox]').click(function(){
    // code goes here
});
20
Joseph Silber

または、すべてのチェックボックスに同じクラス名を付け、チェックボックスにも対応するdiv IDを付けると、次のコードを使用できます。

<input type="checkbox" class="checkall" id="part1">Part 1

スクリプトは次のようになります。

$('.checkall').click(function () {
if (this.checked == false) {
$("." + $(this).attr("id")).hide();
}
});
1
user3512003

私も同様の問題を抱えていました。このStackOverflowページは私が偶然見つけた最初の答えですが、実際には満足していませんでした。私はこの記事を見つけました https://www.kevinleary.net/jquery-checkbox-checked/ より良い解決策があります。

$('input[name="subscribe"]').on('click', function(){
    if ( $(this).is(':checked') ) {
        $('input[name="email"]').show();
    } 
    else {
        $('input[name="email"]').hide();
    }
});
1
Craig London

これを使って：

$('#part1 input:checkbox').click(...)

http://api.jquery.com/checkbox-selector/

0
Arash N