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

Question

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

我试过了

#row2 {
display:none;

}

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

打开页面时的任何其他解决方案我只想查看已选中的 div（第 2 行）。我不想在页面加载时看到其他 div。

谢谢...

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

Ps: 图片和按钮在 jsfiddled 资产上不可见。最好通过演示查看 link.

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

OR 只有 css 你可以使用

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

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

Divs All Visible at Page Opening (despite of jquery, show div on radio button click)

html

checkbox

jquery

visibility

radio-button