グループ内でラジオのように機能する複数の選択

グループ内で1つのオプションのみを選択する必要があります。私はグループ内でラジオのように機能する複数の選択

A1 OR A2 OR A3のいずれかをクリックすることができる必要があり、複数のselect.js

を使用していた

と

B1又はB2 OR 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などが必要です。 2つの選択が行われるまで、ドロップダウンを開いたままにしておきたいと思いますか？ – Highdown

通常、複数選択のプラグインを使用すると、単一select.Howeverに各OPTGROUPに一つだけの選択肢を選ぶことができ、あなたの希望の動作をサポートしていない、あなたはAに一つだけの選択肢を選択することができますoptgroupなしのシングルセレクト

2つの「1行」選択を使用して、目的の機能を達成できます。

PS：1つのoptgroupでラジオボタンを1つだけ選択できるように複数選択動作をカスタマイズしようとしましたが、プラグインの柔軟性が十分ではありません。

<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

グループ内でラジオのように機能する複数の選択

答えて

関連する問題