單選按鈕隱藏/顯示所有

Question

我有一個單選按鈕的字段：隱藏和顯示，我希望選擇隱藏時隱藏下面的所有字段，並在選擇顯示時顯示全部。下面是我的代碼：

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

Answer 1

隱藏和使用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標籤最近的代碼包含）來生成。

Answer 2

嘗試類似這樣的東西。它發現電臺的母公司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/

Answer 3

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

Answer 4

你爲什麼不添加類fields到<dd>要隱藏和使用jQuery或類似的隱藏<dd>東西。你也可能想要一個像class或id這樣的標識符給單選按鈕。然後你可以這樣隱藏fields。

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

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

這裏的工作小提琴：https://jsfiddle.net/28nboav9/

這是類似於你在哪裏找？

Answer 5

這應該工作

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/

Answer 6

包需要被更好的代碼優化顯示/隱藏DIV中的HTML代碼

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

Answer 7

$("#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