Javascript 单选按钮隐藏/显示所有内容

我有一个带有单选按钮的字段：隐藏和显示，选择隐藏时我希望隐藏下面的所有字段，选择显示时显示所有字段。下面是我的代码：

<div id="product-options-wrapper" class="product-options">
        <dd>
            <div class="input-box display">
                <ul class="options-list">
                    <li>
                        <input class="radio product-custom-option" type="radio" checked="checked"><label for="options_6032_2">Show</label>
                    </li>
                    <li>
                        <input class="radio product-custom-option" type="radio"><label for="options_6032_3">Hide</label>
                    </li>
                </ul>
            </div>
        </dd>
        
        <dd>
            <div class="input-box fontclass">
                <select>
                    <option>Arial </option>
                    <option>Lato </option>
                    <option>Disney Print </option>
                </select>
            </div>
        </dd>
        
        <dd>
            <div class="input-box">
                <input id="mirror" type="text" value="">
            </div>
        </dd>
        
        <dd class="last">
            <div class="colorclass">
                <select>
                    <option>red </option>
                    <option>black </option>
                </select>
            </div>
        </dd>
</div>

这是我的html：

<li>
<input id="options_6032_2" class="radio validate-one-required-by-name product-custom-option" type="radio" price="0" value="42978" name="options[6032]" onclick="opConfig.reloadPrice()" checked="checked">
<span class="label">
<label for="options_6032_2">Hide </label>
</span>
</li>
<li>
<input id="options_6032_3" class="radio validate-one-required-by-name product-custom-option" type="radio" price="100" value="42979" name="options[6032]" onclick="opConfig.reloadPrice()">
<span class="label">
<label for="options_6032_3">
Show
<span class="price-notice">
+
<span class="price">Dkr100.00</span>
</span>
</label>
</span>
</li>

隐藏


显示
+
丹麦克朗100.00

更新：

也许这会有所帮助，这段代码是生成此单选选项的php代码：

    $selectHtml = '<ul id="options-'.$_option->getId().'-list" class="options-list">';
    $require = ($_option->getIsRequire()) ? ' validate-one-required-by-name' : '';
    $arraySign = '';
    switch ($_option->getType()) {
        case Mage_Catalog_Model_Product_Option::OPTION_TYPE_RADIO:
            $type = 'radio';
            $class = 'radio';
            if (!$_option->getIsRequire()) {
                $selectHtml .= '<li><input type="radio" id="mylabel options_' . $_option->getId() . '" class="'
                    . $class . ' product-custom-option" name="options[' . $_option->getId() . ']"'
                    . ($this->getSkipJsReloadPrice() ? '' : ' onclick="opConfig.reloadPrice()"')
                    . ' value="" checked="checked" /><span class="label"><label for="options_'
                    . $_option->getId() . '">' . $this->__('None') . '</label></span></li>';
            }
            break;
        case Mage_Catalog_Model_Product_Option::OPTION_TYPE_CHECKBOX:
            $type = 'checkbox';
            $class = 'checkbox';
            $arraySign = '[]';
            break;
    }

$selectHtml='
”；
$require=（$_option->getIsRequire（））？'验证名称“：”所需的名称；
$arraySign=''；
开关（$\u选项->getType（））{
案例图片目录型号产品选项选项选项类型收音机：
$type=‘radio’；
$class='radio'；
如果（！$\u选项->getIsRequire（））{
$selectHtml.='
'。$this->\uuu（'None'）。
；
}
打破
案例图片目录型号产品选项：：选项类型复选框：
$type='checkbox'；
$class='checkbox'；
$arraySign='[]'；
打破
}

试试这样的方法。它查找收音机的父DD并隐藏其所有同级：

$('#options_6032_2').on('click', function(){
   $(this).closest('dd').siblings().show();
});
$('#options_6032_3').on('click', function(){
   $(this).closest('dd').siblings().hide();
});

这在一定程度上取决于你的收音机的动态性。您可能希望为选择器指定一个特定的类

---

还可以看到这把小提琴：

试试这样的东西。它查找收音机的父DD并隐藏其所有同级：

$('#options_6032_2').on('click', function(){
   $(this).closest('dd').siblings().show();
});
$('#options_6032_3').on('click', function(){
   $(this).closest('dd').siblings().hide();
});

这在一定程度上取决于你的收音机的动态性。您可能希望为选择器指定一个特定的类

---

还可以看到这把小提琴：

为什么不将类

字段添加到
中，然后使用
jQuery
或类似的东西来隐藏
。您可能还希望在单选按钮上添加一个类或id之类的标识符。然后可以通过这种方式隐藏
字段

$(".show").change(function() {
  if(this.checked) {
      $(".fields").show();
  }
});

$(".hide").change(function() {
  if(this.checked) {
      $(".fields").hide();
  }
});

这是一把小提琴：

这与您要查找的内容类似吗？
为什么不将类
字段添加到要隐藏的
中，并使用
jQuery
或类似的内容来隐藏
。您可能还希望在单选按钮上添加一个类或id之类的标识符。然后可以通过这种方式隐藏
字段

$(".show").change(function() {
  if(this.checked) {
      $(".fields").show();
  }
});

$(".hide").change(function() {
  if(this.checked) {
      $(".fields").hide();
  }
});

这是一把小提琴：

这与您在哪里寻找的类似吗？
这应该可以

opConfig.reloadPrice = function(show){
    if(show){
        $('#select_6028,#options_6030_text,#select_6031').show();
    }else{
        $('#select_6028,#options_6030_text,#select_6031').hide();
    }    
}

您可以更改选择器以隐藏/显示所需内容。我认为最好的方法是向所有要隐藏/显示的字段添加一个类，这样您只需执行
$（'.classToHideShow'）.show（）

下面是经过修改的代码：
应该可以

opConfig.reloadPrice = function(show){
    if(show){
        $('#select_6028,#options_6030_text,#select_6031').show();
    }else{
        $('#select_6028,#options_6030_text,#select_6031').hide();
    }    
}

您可以更改选择器以隐藏/显示所需内容。我认为最好的方法是向所有要隐藏/显示的字段添加一个类，这样您只需执行
$（'.classToHideShow'）.show（）

下面是经过修改的代码：
使用jQuery/JavaScript隐藏和显示元素非常简单。向要隐藏的元素添加一个类（在下面的示例中，我将其命名为
hidden
），然后使用
hide
和
show
函数，如下所示：

$('#options_6032_3').click(function() {
  $('.hidden').hide();
})
$('#options_6032_2').click(function() {
  $('.hidden').show();
})

看看这个，看看它是如何工作的

编辑

根据您在对本答案的评论中提供的示例，此备选方案应适用于：

var hideRadio = $('li:nth-child(2) input:radio');
var showRadio = $('li:first input:radio');

hideRadio.click(function() {
  $(this).closest('dd').siblings(':nth-child(3)').hide();
  $(this).closest('dd').siblings(':nth-child(4)').hide();
})
showRadio.click(function() {
  $(this).closest('dd').siblings(':nth-child(3)').show();
  $(this).closest('dd').siblings(':nth-child(4)').show();
})

看看这个，看看它是如何工作的

注意：
动态创建的HTML代码每次都需要以相同的格式生成（使用您最新代码包含的
dd
和
dt
标记）。
使用jQuery/JavaScript隐藏和显示元素非常简单。向要隐藏的元素添加一个类（在下面的示例中，我将其命名为
hidden
），然后使用
hide
和
show
函数，如下所示：

$('#options_6032_3').click(function() {
  $('.hidden').hide();
})
$('#options_6032_2').click(function() {
  $('.hidden').show();
})

看看这个，看看它是如何工作的

编辑

根据您在对本答案的评论中提供的示例，此备选方案应适用于：

var hideRadio = $('li:nth-child(2) input:radio');
var showRadio = $('li:first input:radio');

hideRadio.click(function() {
  $(this).closest('dd').siblings(':nth-child(3)').hide();
  $(this).closest('dd').siblings(':nth-child(4)').hide();
})
showRadio.click(function() {
  $(this).closest('dd').siblings(':nth-child(3)').show();
  $(this).closest('dd').siblings(':nth-child(4)').show();
})

看看这个，看看它是如何工作的

注意：
动态创建的HTML代码每次都需要以相同的格式生成（使用您最新代码包含的
dd
和
dt
标记）。
将HTML代码包装在div中，需要显示/隐藏以更好地优化代码

HTML

将html代码包装在div中，div需要显示/隐藏以更好地优化代码

HTML

试试这个。它使用JQuery和相对选择器的组合来实现您想要的效果。小提琴：

试试这个。它使用JQuery和相对选择器的组合来实现您想要的效果。Fiddle:
请添加到目前为止您已经获得的js/jQuery代码。我没有js，只是为了我在这里发布的这个，然后您将在哪里应用修复程序，我们应该在哪里查找问题？如果有问题，我会告诉您Anil Kumar，如果你的答案是正确的或不是。好的解决方案请在这里添加到目前为止你已经得到的js/jQuery代码。我没有js，只是为了我在这里发布的这个，那么你将在哪里应用修复程序，我们应该在哪里查找问题？如果有问题，我会告诉你Anil Kumar，如果你的答案是正确的或否。好的解决方案你好，谢谢，但该选项的ID是可变的，将永远是另一个数字。我与兄弟姐妹一起使用此函数，但我有一个问题，请查看我文章的底部。你的带隐藏的div没有空格。在你的帖子下面看到我的评论。您好，谢谢，但该选项的ID是可变的，将永远是另一个数字。我与兄弟姐妹一起使用此函数，但我有一个问题，请查看我帖子的底部。您的带隐藏的div没有空格。在你的帖子下面看到我的评论。嗨，我不能添加类。结构是默认的Magento，要添加类，我们需要更改核心。有趣的是，你可以添加jquery吗？如果是这样，您可以使用
contains