Html div在页面打开时全部可见（尽管使用jquery，但在单选按钮单击时显示div）

我试着去做；单击复选框单选按钮时显示div。我使用jquery创建了它，但当您加载页面时，我的所有div都是可见的。必须单击“我的第一个复选框”单选按钮才能使其他div不可见。或者只需单击其他复选框单选按钮

我试过了

#row2 {
display:none;

}

但当我将其添加到css中时，如果您单击第一个复选框单选按钮（与div row2相关），div将不可见并且不工作

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

谢谢

演示链接：

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

---

通过添加

.filter（':checked'）触发单击。在输入的单击事件结束时单击（）。。试试看

$(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;
}