[英]jQuery - hide / show divs when checkboxes are checked
我有一个 jquery 函数来在选中或取消选中某些复选框时显示或隐藏 div,并且使用“更改”功能可以正常工作。 因此,如果之前已经选中了复选框,则不会显示相应的 div。 如何更改此代码以使其正常工作?
我的代码在这里:
<script>
jQuery(document).ready(function($) {
$('.my_features').change(function() {
var checkbox = $(this);
if( checkbox.is(':checked') ) {
$( '#' + checkbox.attr('data-name') ).show();
} else {
$( '#' + checkbox.attr('data-name') ).hide();
}
});
});
</script>
我假设您的问题是如何显示/隐藏加载页面时已选中/未选中的复选框的 div。
您可以通过将用于change()
的相同函数传递到each()
方法中来完成此操作,该方法将迭代每个复选框并运行该函数。
jQuery(document).ready(function($) {
$('.my_features').each(function(){
var checkbox = $(this);
//you can use data() method to get data-* attributes
var name = checkbox.data('name');
if( checkbox.is(':checked') ) {
$( '#' + name ).show();
} else {
$( '#' + name ).hide();
}
});
});
演示
function update(){ var checkbox = $(this); var name = checkbox.data('name'); if( checkbox.is(':checked') ) { $( '#' + name ).show(); } else { $( '#' + name ).hide(); } } //just setup change and each to use the same function $('.my_features').change(update).each(update);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input class="my_features" type="checkbox" data-name="first" /> <input class="my_features" type="checkbox" data-name="second" checked /> <input class="my_features" type="checkbox" data-name="third" checked /> <input class="my_features" type="checkbox" data-name="fourth" /> </div> <div id="first">First</div> <div id="second">Second</div> <div id="third">Third</div> <div id="fourth">Fourth</div>
这是非常规范的:
$(function() { $('.my_features').on("change",function() { $('#'+$(this).attr('data-name')).toggle(this.checked); // toggle instead }).change(); // trigger the change });
.toggleDiv { display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label><input type="checkbox" class="my_features" data-name="div1">Div 1</label> <label><input type="checkbox" checked class="my_features" data-name="div2">Div 2</label> <div id="div1" class="toggleDiv">Div1 div</div> <div id="div2" class="toggleDiv">Div2 div</div>
您可以使用以下方法获取数据,然后根据复选框值显示或隐藏 div
$(document).ready(function() {
$('.my_features').on('click', function() {
var checkbox = $(this);
var div = checkbox.data('name');
if (checkbox.is(':checked')) {
$('#' + div).show();
} else {
$('#' + div).hide();
}
});
})
你可以看到一个工作fiddle
$(document).ready(function(){
$('.my_features').change(function(){
if(this.checked)
$('#data-name').hide();
else
$('#data-name').show();
});
});
试试这个方法。
<script>
jQuery(document).ready(function($) {
$('.my_features').each(function() {
$(this).change(function() {
var checkbox = $(this);
if( checkbox.is(':checked') ) {
$( '#' + checkbox.attr('data-name') ).show();
} else {
$( '#' + checkbox.attr('data-name') ).hide();
}
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.