使用jquery在每個手風琴選項卡中選擇一個單選按鈕

Question

我只想在每個選項卡中選擇一個單選按鈕。但是，當我在一個選項卡中選擇一個單選按鈕，然後當我在另一個選項卡中移動並檢查另一個單選按鈕時，之前選定的單選按鈕被自動刪除，但我使用不同的ID調用每個選項卡。

請參閱代碼：

<form id="myForm"> 
     <section id="tab1" class="tab-content active"> 
      <div id="collartab1"> 
      <ul class="style-ul"> 
      <li> 
      <a> 
       <img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK). 'media/measurement_images/collar/point.png'; ?>" alt="sample" /> 

       <input type="radio" name="collar" id='point' value="Point" > 
       <label for="point"> 
       <span> Point</span> 
       </label> 
       </a> 
       </li> 
       <li> 
      <a> 
       <img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK). 'media/measurement_images/collar/semi-sepread.png'; ?>" alt="sample" /> 
       <input type="radio" name="collar" id='semi-spread' value="SEMI SPREAD" > 

       <label for="semi-spread"> <span>SEMI SPREAD</span></label> 

       </a> 
       </li> 
       <li> 
      <a> 
       <img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK). 'media/measurement_images/collar/spread.png'; ?>" alt="sample" /> 

       <input type="radio" name="collar" id='spread' value="SPREAD" > 

       <label for="spread"> <span>SPREAD</span></label> 

       </a> 
       </li> 
       <li class="border"></li> 
       <li> 
      <a> 
       <img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK). 'media/measurement_images/collar/button-down.png'; ?>" alt="sample" /> 
       <input type="radio" name="collar" id='button-down' value="BUTTON DOWN" > 

       <label for="button-down"> <span>BUTTON DOWN</span></label> 

       </a> 
       </li> 
       <li> 
      <a> 
       <img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK). 'media/measurement_images/collar/pinned.png'; ?>" alt="sample" /> 

       <input type="radio" name="collar" id='pinned' value="PINNED" > 

       <label for="pinned"> <span>PINNED</span></label> 

       </a> 
       </li> 
      <li class="border"></li> 
       </ul> 
       <div class="custom-s-buton"> 
       <input type="button" class="button custom-s" name="next" value="next"> 
       </div> 

      </div> 
     </section> 
     <section id="tab2" class="tab-content hide"> 
      <div id="cufftab2"> 
      <ul class="style-ul"> 
      <li> 
      <a> 
       <img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK). 'media/measurement_images/cuff/round.png'; ?>" alt="sample" /> 
       <input type="radio" name="cuff" id='round' value="Round" > 

       <label for="round"> <span>ROUND</span></label> 

       </a> 
       </li> 
       <li> 
      <a> 
       <img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK). 'media/measurement_images/cuff/angled.png'; ?>" alt="sample" /> 
       <input type="radio" name="cuff" id='angled' value="ANGLED" > 

       <label for="angled"> <span>ANGLED</span> </label> 

       </a> 
       </li> 
       <li> 
      <a> 
       <img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK). 'media/measurement_images/cuff/two-button-angeld.png'; ?>" alt="sample" /> 
       <input type="radio" name="cuff" id='t-button' value="TWO BUTTON ANGLED" > 

       <label for="t-button"> <span>TWO BUTTON ANGLED</span> </label> 

       </a> 
       </li> 
       <li class="border"></li> 
       <li> 
      <a> 
       <img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK). 'media/measurement_images/cuff/french-cuff.png'; ?>" alt="sample" /> 
       <input type="radio" name="cuff" id='french-c' value="FRENCH CUFFS BARREL" > 

       <label for="french-c"> <span>FRENCH CUFFS BARREL</span> </label> 

       </a> 
       </li> 
       <li> 
      <a> 
       <img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_LINK). 'media/measurement_images/cuff/french-angeld.png'; ?>" alt="sample" /> 
       <input type="radio" name="cuff" id='french-a' value="FRENCH CUFFS ANGLED" > 

       <label for="french-a"> <span>FRENCH CUFFS ANGLED</span> </label> 

       </a> 
       </li> 
       <li class="border"></li> 
       </ul> 
       <div class="custom-s-buton"> 
       <input type="button" class="button btn-cart" name="next" value="next"> 
       </div> 
      </div> 
     </section> 
</form> 
<script type="text/javascript"> 
jQuery('input:radio').click(function() { 
    jQuery('li:has(input:radio:checked)').addClass('active'); 
    jQuery('li:has(input:radio:not(:checked))').removeClass('active'); 
    }); 

jQuery('#collartab1 input').on('change', function() { 
    alert(jQuery('input[name=collar]:checked', '#collartab1').val()); 
    //jQuery('.first').html($('input[name=collar]:checked', '#collartab1').val()); 



}); 


jQuery('#cufftab2 input').on('change', function() { 
    alert(jQuery('input[name=cuff]:checked', '#cufftab2').val()); 
    // $('.prince').html($('input[name=cuff]:checked', '#cufftab2').val()); 

}); 

</script> 

請查看代碼，並告訴我爲什麼只選擇了一個單選按鈕 感謝

Answer 1

具有相同名稱的單選按鈕組成一組從中可以一次只能選擇一個選項。您可能需要的是將這些單選按鈕轉換爲複選框，您可以選擇其中的幾個。 您應該在複選框的名稱後面加括號，如下所示：'collar []'，因此所選值將被設置爲僅包含所選值的數組值。

<input type="checkbox" name="collar[]" value="SEMI SPREAD"> 
<input type="checkbox" name="collar[]" value="SPREAD"> 
<input type="checkbox" name="collar[]" value="BUTTON DOWN"> 
<input type="checkbox" name="collar[]" value="PINNED"> 

然後，如果你選擇的傳播和牽制後變量looke這樣的：

array(...) { 
    ["collar"]=> 
    array(3) { 
    [0]=> 
     string(6) "SPREAD" 
    [1]=> 
     string(6) "PINNED" 
    } 
    ... 
}