使用Jquery實現無線電選擇

我想在使用多個選擇的組之間實現無線電功能。使用Jquery實現無線電選擇

即，在A組，

如果用戶點擊A1它必須取消A2和A3 如果用戶點擊A2它必須取消A1和A3 如果用戶點擊A3它必須取消A1和A2

即，在B組，

如果用戶點擊B1它具有如果使用者按下B2它具有如果用戶點擊B3它必須取消B1和B2

0123以取消選擇B1和B3 取消選擇B2和B3

<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
     
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script> 
 
     
 
      <link href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" rel="stylesheet"/> 
 
     
 
     
 
    </head> 
 
    <body> 
 
     <select multiple="multiple"> 
 
      <optgroup label="Group A"> 
 
       <option value="1">Radio A1</option> 
 
       <option value="2">Radio A2</option> 
 
       <option value="3">Radio A3</option>    
 
      </optgroup> 
 
      <optgroup label="Group B"> 
 
       <option value="4">Radio B1</option> 
 
       <option value="5">Radio B2</option> 
 
       <option value="6">Radio B3</option> 
 
      </optgroup> 
 
     </select> 
 
     <script src="multiple-select.js"></script> 
 
     <script> 
 
      $('select').multipleSelect(
 
      { 
 
       multiple: true, 
 
       multipleWidth: 300, 
 
      selectAll: false, 
 
       width: '100%', 
 
       
 
       onClick: function(view) { 
 
        //; 
 
       }    
 
      } 
 
      
 
      ); 
 
     </script> 
 
    </body>

來源

2017-06-23 Code Guy

您也可以只使用正常的''''''。只要所有的按鈕都具有相同的'''name''，它就支持在單擊新按鈕時取消選擇以前的按鈕。 –

沒有這個我試過但不起作用 –

'''

'''所以這段代碼不會顯示單選按鈕，只允許一次爲您選擇一個按鈕？ –

在點擊此複選框，此複選框的兄弟複選框的財產('checked')將變更爲false ..

<body> 
    <select multiple="multiple" id="multiselect"> 
     <optgroup label="Group A" id="optgroup1"> 
      <option value="1" class='radioa'>Radio A1</option> 
      <option value="2" class='radioa'>Radio A2</option> 
      <option value="3"class='radioa'>Radio A3</option>    
     </optgroup> 
     <optgroup label="Group B" id="optgroup2"> 
      <option value="4" class="radiob">Radio B1</option> 
      <option value="5" class="radiob">Radio B2</option> 
      <option value="6" class="radiob">Radio B3</option> 
     </optgroup> 
    </select> 
    <script src="multiple-select.js"></script> 
    <script> 
     $('select').multipleSelect(
     { 
      multiple: true, 
      multipleWidth: 300, 
      selectAll: false, 
      width: '100%'   
     }); 

     $(document).ready(function(){ 
     $(".radioa input[type='checkbox']").on('click', function() { 
      if($(this).prop('checked')==false){ 
       $(this).prop('checked', false); 
      } 
      else{ 
       $('.radioa input[type="checkbox"]').prop('checked', false); 
       $(this).prop('checked', true); 
      } 
      }); 

     $(".radiob input[type='checkbox']").on('click', function() {   
      if($(this).prop('checked')==false){ 
       $(this).prop('checked', false); 
      } 
      else{ 
       $('.radiob input[type="checkbox"]').prop('checked', false); 
       $(this).prop('checked', true); 
      } 
      });     
     }); 

    </script> 
</body>

參考有關siblings這裏https://www.w3schools.com/jquery/traversing_siblings.asp

來源

2017-06-23 06:27:12 Jana

回答只有代碼和沒有解釋是不是一個好的答案 – guradio

我試過，但這是行不通的。我只是把你的代碼之間的警報，它沒有迴應，它不會被調用 –

你把我的代碼放在這個'$（document）.ready（function（）{// code}）;'？ – Jana

使用Jquery實現無線電選擇

回答

相關問題