chelseaNB1 2023-03-25 14:43 采纳率: 75.7%
浏览 10
已结题

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

如题,请问如何通过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>


有效果一定采纳!感谢!

  • 写回答

1条回答 默认 最新

  • IT_service_mesh 2023-03-25 15:05
    关注

    参考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事件,当复选框状态改变时,它会取消其他的复选框勾选状态并禁止用户选择多个,如果用户在勾选多个复选框时,会弹出“只能选择一个”提示框,并在最后一个的以前的所有复选框中取消勾选状态。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 4月17日
  • 已采纳回答 4月9日
  • 创建了问题 3月25日

悬赏问题

  • ¥15 科来模拟ARP欺骗困惑求解
  • ¥60 有没有朋友懂那种地图软件逻辑的?
  • ¥100 iOS开发关于快捷指令截屏后如何将截屏(或从截屏中提取出的文本)回传给本应用并打开指定页面
  • ¥15 unity连接Sqlserver
  • ¥15 图中这种约束条件lingo该怎么表示出来
  • ¥15 VSCode里的Prettier如何实现等式赋值后的对齐效果?
  • ¥15 流式socket文件传输答疑
  • ¥20 keepalive配置业务服务双机单活的方法。业务服务一定是要双机单活的方式
  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办