Divs All Visible at Page Opening(尽管有jquery，但单击单选按钮时显示div)

Question

我正在尝试；单击复选框单选按钮时显示div。我用jquery实现了它，但当您加载页面时，我所有的div都是可见的。你必须点击我的第一个复选框单选按钮才能使其他div不可见。或者只需单击其他复选框单选按钮。

我试过

#row2 {
display:none;

}

但当我将其添加到css中时，如果单击第一个复选框单选按钮(与div row2相关(，则div不可见，也不起作用。

当您打开页面时，我只想看到选中的div(row2(的任何其他解决方案。页面加载时，我不想看到其他div。

谢谢。。。

演示链接：https://rexin-demo.netlify.app/main.html

Ps：图片和按钮在jsfiddled的资产上不可见。最好通过演示链接查看。

https://jsfiddle.net/t4e13xvj/

Answer 1

通过在输入的点击事件末尾添加.filter(':checked').click()来触发点击。。试试

$(document).ready(function(){
$('input[type="radio"]').click(function(){
var inputValue = $(this).val(); // use .val() instead of .attr('value')
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
}).filter(':checked').click();
});

此外，我更喜欢使用change而不是click进行无线电和复选框输入

$(document).ready(function(){
$('input[type="radio"]').on('change' ,function(){
if(this.checked){
var inputValue = $(this).val();
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
}
}).filter(':checked').prop('checked' , true).change();
});

或者只有css才能使用

.box:not(.product){
display : none;
}