多个选择功能，像一个组中的收音机

我需要在组内选择一个选项。我已经使用多select.js多个选择功能，像一个组中的收音机

我应该能够单击

A1或A2或A3

和

B1或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> 
 
      $('select').multipleSelect(
 
      { 
 
       multiple: true, 
 
       multipleWidth: 300, 
 
      selectAll: false, 
 
       width: '100%', 
 
       
 
       onClick: function(view) { 
 
        //; 
 
       }    
 
      } 
 
      
 
      ); 
 
     </script> 
 
    </body>

来源

2017-06-24 Code Guy

我已经创造了在过去的移动设备的一些类似的紧凑专门的控制，但从来没有发现插件提供这种类型的行为。它通常需要自定义CSS和JavaScript或等价物来实现条件切换和显示功能。我假设你想让下拉菜单保持打开直到做出两个选择？ – Highdown

通常情况下，多选择插件不支持你所需的行为，你可以选择在一个单一的select.However每个OPTGROUP只有一个选择，你可以选择在只有一个选择没有optgroup的单选。

所以你可以使用2个“单行”选择来完成你想要的功能。 PS：我试图自定义多选行为，使您可以在单个optgroup中只选择一个单选按钮，但该插件的灵活性不够。

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.css" /> 
 
</head> 
 

 
<body> 
 
    <fieldset> 
 
     <legend>Choose Group A and B</legend> 
 
     <label>Group A</label> 
 
     <select multiple="multiple"> 
 
      <option value="1">Radio A1</option> 
 
      <option value="2">Radio A2</option> 
 
      <option value="3">Radio A3</option> 
 
     </select> 
 

 
     <label>Group B</label> 
 
     <select multiple="multiple"> 
 
      <option value="4">Radio B1</option> 
 
      <option value="5">Radio B2</option> 
 
      <option value="6">Radio B3</option> 
 
     </select> 
 
    </fieldset> 
 

 

 
    <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> 
 
    <script> 
 
     $('select').multipleSelect({ 
 
      multiple: true, 
 
      multipleWidth: 300, 
 
      selectAll: false, 
 
      width: '100%', 
 
      single: true, 
 
      onClick: function (view) { 
 
       /* 
 
       view.label: the text of the checkbox item 
 
       view.checked: the checked of the checkbox item 
 
       */ 
 
       //Uncheck other checkboxes in the group 
 
      }, 
 
      onOptgroupClick: function (view) { 
 
       /* 
 
       view.label: the text of the optgroup 
 
       view.checked: the checked of the optgroup 
 
       view.children: an array of the checkboxes (DOM elements) inside the optgroup 
 
       */ 
 
      } 
 
     }); 
 
    </script> 
 
</body> 
 

 
</html>

希望它可以帮助你。

对于空间的形式起见，使用引导程序内嵌形式：

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Multiple select to function like radio in a group</title> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <style> 
 

 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
     <form class="form-inline"> 
 
      <fieldset> 
 
       <legend>Choose Group A and B</legend> 
 
       <label>Group A </label> 
 
       <select class="form-control"> 
 
        <option value="1">Radio A1</option> 
 
        <option value="2">Radio A2</option> 
 
        <option value="3">Radio A3</option> 
 
       </select> 
 

 
       <label>Group B </label> 
 
       <select class="form-control"> 
 
        <option value="4">Radio B1</option> 
 
        <option value="5">Radio B2</option> 
 
        <option value="6">Radio B3</option> 
 
       </select> 
 
      </fieldset> 
 

 
     </form> 
 
    </div> 
 

 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</body> 
 

 
</html>

来源

2017-06-24 08:34:26 YinchaoOnline

谢谢yinchaoonline，如果它在一个下拉列表中，会非常棒。我的形式没有空间。如果你可以帮忙请... –

我对这个插件不熟悉，如果为了表单空间的缘故，你可以使用带引导的内联表单。 – YinchaoOnline

多个选择功能，像一个组中的收音机

回答

相关问题