如何在javascript的幫助下從復選框列表中只選擇一個復選框

Question

我有很多復選框的 html 表單，這些復選框是由 PHP 根據我的 mysql 表中的數據動態生成的。 前 3 個復選框（FBS、PPBS、RBS）只能選擇一個。 如果選中復選框 1，則必須取消選中 2 和 3，如果選中 2，則必須取消選中 1 和 3，如果選中 3，則必須取消選中 1 和 2。 所以基本上前3個復選框都不應該被選中，或者只應該選中一個。

我不能使用單選按鈕，因為這些復選框是動態生成的。 如果我使用單選按鈕，那么其余的復選框就會出現問題。 示例代碼如下。

<input type="checkbox" name="boxset[]" value="FBS" id="1">&nbsp;FBS<br>
<input type="checkbox" name="boxset[]" value="PPBS (2 hrs)" id="2">&nbsp;PPBS (2 hrs)<br>
<input type="checkbox" name="boxset[]" value="RBS" id="3">&nbsp;RBS<br>
<input type="checkbox" name="boxset[]" value="SGOT" id="4">&nbsp;SGOT<br>
<input type="checkbox" name="boxset[]" value="SGPT" id="5">&nbsp;SGPT<br>
<input type="checkbox" name="boxset[]" value="ALP" id="6">&nbsp;ALP<br>
<input type="checkbox" name="boxset[]" value="T. Protein" id="7">&nbsp;T. Protein<br>
<input type="checkbox" name="boxset[]" value="S. Albumin" id="8">&nbsp;S. Albumin<br>
<input type="checkbox" name="boxset[]" value="T. Bilirubin" id="9">&nbsp;T. Bilirubin<br>
<input type="checkbox" name="boxset[]" value="D. Bilirubin" id="10">&nbsp;D. Bilirubin<br>
<input type="checkbox" name="boxset[]" value="Urea" id="11">&nbsp;Urea<br>
<input type="checkbox" name="boxset[]" value="Creatinine" id="12">&nbsp;Creatinine<br>
<input type="checkbox" name="boxset[]" value="Sodium (Na+)" id="13">&nbsp;Sodium (Na+)<br>
<input type="checkbox" name="boxset[]" value="Potassium (K+)" id="14">&nbsp;Potassium (K+)<br>
<input type="checkbox" name="boxset[]" value="Chloride (Cl-)" id="15">&nbsp;Chloride (Cl-)<br>
<input type="checkbox" name="boxset[]" value="Calcium" id="16">&nbsp;Calcium<br>
<input type="checkbox" name="boxset[]" value="Phosphorous" id="17">&nbsp;Phosphorous<br>
<input type="checkbox" name="boxset[]" value="Uric Acid" id="18">&nbsp;Uric Acid<br>
<input type="checkbox" name="boxset[]" value="CPK" id="19">&nbsp;CPK<br>
<input type="checkbox" name="boxset[]" value="CPK-MB" id="20">&nbsp;CPK-MB<br>
<input type="checkbox" name="boxset[]" value="Cholesterol" id="21">&nbsp;Cholesterol<br>
<input type="checkbox" name="boxset[]" value="Triglyceride" id="22">&nbsp;Triglyceride<br>
<input type="checkbox" name="boxset[]" value="HDL" id="23">&nbsp;HDL<br>
<input type="checkbox" name="boxset[]" value="LDL" id="24">&nbsp;LDL<br>
<input type="checkbox" name="boxset[]" value="Amylase" id="25">&nbsp;Amylase<br>
<input type="checkbox" name="boxset[]" value="Cholinesterase" id="26">&nbsp;Cholinesterase<br>
<input type="checkbox" name="boxset[]" value="LDH" id="27">&nbsp;LDH<br>
<input type="checkbox" name="boxset[]" value="T3-Total" id="28">&nbsp;T3-Total<br>
<input type="checkbox" name="boxset[]" value="T4-Total" id="29">&nbsp;T4-Total<br>
<input type="checkbox" name="boxset[]" value="TSH" id="30">&nbsp;TSH<br>
<input type="checkbox" name="boxset[]" value="Vitamin B12" id="31">&nbsp;Vitamin B12<br>
<input type="checkbox" name="boxset[]" value="25-OH-Vitamin D" id="32">&nbsp;25-OH-Vitamin D<br>
<input type="checkbox" name="boxset[]" value="FSH" id="33">&nbsp;FSH<br>
<input type="checkbox" name="boxset[]" value="LH" id="34">&nbsp;LH<br>
<input type="checkbox" name="boxset[]" value="Prolactin" id="35">&nbsp;Prolactin<br>
<input type="checkbox" name="boxset[]" value="HbA1c" id="36">&nbsp;HbA1c<br>

Answer 1

這是給你的一塊蛋糕。

 $(function() { $('input[type=checkbox]').click(function() { var id = $(this).attr('id'); if(id == 1) { $(":checkbox[id=2]").prop("checked",false); $(":checkbox[id=3]").prop("checked",false); } else if(id ==2) { $(":checkbox[id=1]").prop("checked",false); $(":checkbox[id=3]").prop("checked",false); } else if(id ==3) { $(":checkbox[id=2]").prop("checked",false); $(":checkbox[id=1]").prop("checked",false); } }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="checkbox" name="boxset[]" value="FBS" id="1">&nbsp;FBS<br> <input type="checkbox" name="boxset[]" value="PPBS (2 hrs)" id="2">&nbsp;PPBS (2 hrs)<br> <input type="checkbox" name="boxset[]" value="RBS" id="3">&nbsp;RBS<br>

Answer 2

看看這個https://jsfiddle.net/shoesheill/x4j750ov/4/

$('input[type="checkbox"]').off().on('click', function() {
   $('input[name="' + this.name + '"]').not(this).prop('checked', false);
});