如题,请问如何通过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>IDth>
<th>条件th>
<th>接虫量th>
<th>生育期th>
<th>R400th>
<th>R401th>
<th>R402th>
<th>R403th>
<th>R404th>
<th>R405th>
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>
有效果一定采纳!感谢!
参考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事件,当复选框状态改变时,它会取消其他的复选框勾选状态并禁止用户选择多个,如果用户在勾选多个复选框时,会弹出“只能选择一个”提示框,并在最后一个的以前的所有复选框中取消勾选状态。