多选功能像组中的收音机

debugcn 发表于 Dev

代码人

我只需要在组内选择 1 个选项。我用过multiple-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>

YinchaoOnline

通常，多选插件不支持您想要的行为，即您只能在单个选择中的每个 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。