Question

我想使用多个选择在组之间实现无线电功能。

即。在A组，

如果用户点击A1，则必须取消选择A2和A3 如果用户点击A2，则必须取消选择A1和A3 如果用户点击A3，则必须取消选择A1和A2

即。在B组，

如果用户点击B1，则必须取消选择B2和B3 如果用户点击B2，则必须取消选择B1和B3 如果用户点击B3则必须取消选择B1和B2

<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>

Answer 1

点击此复选框后，此复选框的同级复选框属性('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

使用Jquery实现无线电选择

1 个答案: