我正在尝试创建一个简单的 JQuery 函数。该功能有三个复选框和一个比较按钮。示例可以是Seen here
此函数的目标是当用户单击复选框 1 和 2 时,它会比较隐藏容器一和二的内容。当用户单击复选框 1 和 3 时,它会比较隐藏容器一和三的内容。
我无法让这个功能正常工作。我在下面添加了一段代码
$(document).ready(function() {
var $checkboxes = $('[name^="check"]');
var $target = $('#target');
var $button = $('.compare');
$button.on('click', function() {
$('.data').hide();
$('.checkBox:checked').each(function() {
var div = $(this).attr('name');
$('.compare-block').find('.'+div).show();
})
})
})
最佳答案
我稍微改变了你的代码片段。您仅使用长度,但如果您想比较 1 和 3 或 X 和 Y,您需要知道选择了哪一个。
我所做的更改是,首先检查是否有多个要比较,然后,您会看到哪些。我编辑了一些 HTML 以添加一些 id
$(document).ready(function() {
var $button = $('.compare');
$button.on('click', function() {
var checkedLength = $('[name^="check"]:checked').length;
$('#target .compare-block').hide();
if (checkedLength > 1 ) {
$( '[name^="check"]:checked' ).each(function() {
//$(this).val() I use value, but you can use another thing
$('#container'+$(this).val()).show();
});
}
})
});
关于javascript - jquery输入:checked show and hide div function,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37880271/