使用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实现无线电选择

回答

相关问题