Divs All Visible at Page opening（尽管有 jquery，在单选按钮单击时显示 div）

Posted 2023-05-08

【中文标题】Divs All Visible at Page opening（尽管有 jquery，在单选按钮单击时显示 div）

【英文标题】：Divs All Visible at Page Opening (despite of jquery, show div on radio button click)

【发布时间】：2021-04-09 18:29:35

【问题描述】：

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

我试过了

#row2 
display:none;

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

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

谢谢...

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

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

https://jsfiddle.net/t4e13xvj/

【参考方案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;