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

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

<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>

更新：

单选按钮没有固定的 ID 或类，单选按钮中唯一稳定的东西是文本。

更新：

我几乎在那里我使用div：包含函数和兄弟姐妹，该功能是隐藏的工作，但我不知道为什么没有工作再次显示。这是jquery：

 jQuery('div:contains("Hide ")').on('click', function(){
   jQuery(this).closest('dd').siblings().hide();
});
 jQuery('div:contains("Show ")').on('click', function(){
   jQuery(this).closest('dd').siblings().show();
});

这是我的 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>

更新：

也许这会有所帮助，此代码是生成此无线电选项的 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;
    }

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

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

看看这个jsfiddle看看它是如何工作的。

编辑

根据您在此答案的注释中提供的示例，此替代方法应该有效：

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

看看这个jsfiddle看看它是如何工作的。

注意：动态创建的 HTML 代码每次都需要以相同的格式生成（使用最新代码包含的 dd 和 dt 标记）。

if($('#radio').is(':checked')) { alert("it's checked"); }

为什么不将类fields添加到要隐藏的<dd>并使用jQuery或类似的东西来隐藏<dd>。您可能还需要单选按钮的类或 id 等标识符。然后，您可以通过这种方式隐藏fields。

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

这是一个工作小提琴：https://jsfiddle.net/28nboav9/

这与您要查找的内容相似吗？

将

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

.HTML

  <div id="product-options-wrapper" class="product-options">
                <dd>
                    <div class="input-box display">
                        <ul id="options-6032-list" class="options-list">
                            <li>
                                <input id="options_6032_2" class="radio validate-one-required-by-name product-custom-option" type="radio" value="42978" name="options[6032]" onclick="opConfig.reloadPrice()" checked="checked"><label for="options_6032_2">Show </label>
                            </li>
                            <li>
                                <input id="options_6032_3" class="radio validate-one-required-by-name product-custom-option" type="radio" value="42979" name="options[6032]" onclick="opConfig.reloadPrice()"><label for="options_6032_3">Hide</label>
                            </li>
                        </ul>
                    </div>
                </dd>
        <div id="toggleVisibility">  //wrapped inside div
                <dd>
                    <div class="input-box fontclass">
                        <select id="select_6031" class="required-entry product-custom-option form-control" onchange="opConfig.reloadPrice()" title="" name="options[6031]">
                            <option price="0" value="42969">Arial </option>
                            <option price="0" value="42970">Lato </option>
                            <option price="0" value="42971">Disney Print </option>
                        </select>
                    </div>
                </dd>
                <dd>
                    <div class="input-box">
                        <input id="options_6030_text mirror" class="input-text required-entry validate-length maximum-length-25 product-custom-option form-control" type="text" value="" name="options[6030]" onchange="opConfig.reloadPrice()">
                    </div>
                </dd>
                <dd class="last">
                    <div class="input-box colorclass">
                        <select id="select_6028" class="required-entry product-custom-option form-control" onchange="opConfig.reloadPrice()" title="" name="options[6028]">
                            <option price="0" value="42965">red </option>
                            <option price="0" value="42966">black </option>
                        </select>
                    </div>
                </dd>
    </div>
        </div>

请将此脚本添加到您的页面/js 文件中

Jquery

$(document).ready(function () {
    var $div=$('#toggleVisibility');
    $('#options_6032_2').click(function () {
        if ($(this).is(':checked')) {
            $div.show();
        }
    })
    $('#options_6032_3').click(function () {
        if ($(this).is(':checked')) {
           $div.show();
        }
    })
});

试试这样的事情。它找到收音机的父 DD 并隐藏它的所有同级：

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

这取决于您的收音机的动态程度。您可能希望为选择器分配特定的类。

另请参阅此小提琴：https://jsfiddle.net/cp5ses3y/

这应该有效

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

这是修改后的代码： https://jsfiddle.net/55mrk3xf/

$("#hide").click(function() {
  $('div.fontclass').hide();
  $('div').children('#mirror').hide();
  $('div.colorclass').hide();
});
$("#show").click(function() {
  $('div.fontclass').show();
  $('div').children('#mirror').show();
  $('div.colorclass').show();
});

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

相关内容

最新更新

热门标签：