如何通过jquery提示input复选框只能选择一个

Question

如题，请问如何通过jquery提示input复选框只能选择一个
下面是html

<div class="container-fluid" style="margin-top:5px;">
    <div style="margin-top:10px;overflow-x: scroll;">
        <form method="post">
            {% csrf_token %}
            <table class="table table-bordered">
             <thead>
                 <tr>
                     <th>
                        <button class="btn btn-default" style="height:25px;width:50px;">分析</button>
                     </th>
                      <th>ID</th>
                      <th>条件</th>
                      <th>接虫量</th>
                      <th>生育期</th>
                      <th>R400</th>
                      <th>R401</th>
                      <th>R402</th>
                      <th>R403</th>
                      <th>R404</th>
                      <th>R405</th>                     
                 </tr>
             </thead>
             <tbody>
             {% for item in page_obj %}
                 <tr id="list">
                     <td><input type="checkbox" value="{{ item.aid }}" onclick="check()" class="chb"></td>
                     <td>{{ item.aid }}</td>
                     <td>{{ item.plot_and_bph }}</td>
                     <td>{{ item.insect_inoculation_quantity }}</td>
                     <td>{{ item.growth_period }}</td>
                     <td>{{ item.r400 }}</td>
                      <td>{{ item.r401 }}</td>
                      <td>{{ item.r402 }}</td>
                      <td>{{ item.r403 }}</td>
                      <td>{{ item.r404 }}</td>
                      <td>{{ item.r405 }}</td>                  
                      <td>{{ item.insect_quantity }}</td>
                 </tr>
             {% endfor %}
             </tbody>
         </table>
        </form>
    </div>
</div>

有效果一定采纳！感谢！

Answer 1

参考GPT和自己的思路：您可以使用以下的jQuery代码来实现提示input复选框只能选择一个的功能：

$(document).ready(function(){
    $('input.chb').on('change', function() {
        $('input.chb').not(this).prop('checked', false);
        if($('input.chb:checked').length>1){
            alert("只能选择一个！");
            $(this).prop('checked', false);
        }
    });
});

这段代码会在页面加载后，为所有class为“chb”的input复选框绑定一个change事件，当复选框状态改变时，它会取消其他的复选框勾选状态并禁止用户选择多个，如果用户在勾选多个复选框时，会弹出“只能选择一个”提示框，并在最后一个的以前的所有复选框中取消勾选状态。