多個選擇功能，像一個組中的收音機

我需要在組內選擇一個選項。我已經使用多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

多個選擇功能，像一個組中的收音機

回答

相關問題