これが私の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つのセットだけでなく、すべてのチェックボックスにバインドされます。これらをどのように分離しますか?
もうすぐです。子孫セレクターを区切るためのスペースが必要です。
$('#part1 :checkbox').click(function(){
// code goes here
});
パフォーマンスを向上させるには、次のように使用します。
$('#part1 input[type=checkbox]').click(function(){
// code goes here
});
または、すべてのチェックボックスに同じクラス名を付け、チェックボックスにも対応するdiv IDを付けると、次のコードを使用できます。
<input type="checkbox" class="checkall" id="part1">Part 1
スクリプトは次のようになります。
$('.checkall').click(function () {
if (this.checked == false) {
$("." + $(this).attr("id")).hide();
}
});
私も同様の問題を抱えていました。この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();
}
});