如何在JavaScript的帮助下从复选框列表中仅选择一个复选框

Question

我有带有很多复选框的html表单，这些复选框由PHP根据我的mysql表中的数据动态生成。前3个复选框（FBS，PPBS，RBS）是仅应选中的一个。如果选中复选框1，则必须取消选择2和3，如果选中2，则必须取消选择1和3，如果选中3，则必须取消选择1和2。因此，基本上应该不选择前三个复选框中的一个，也可以仅选择一个。

我不能使用单选按钮，因为这些复选框是动态生成的。如果我使用单选按钮，则其余复选框将出现问题。 示例代码如下。

<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);
});