如何在javascript的帮助下从复选框列表中只选择一个复选框
[英]How to select only one checkbox from list of checkboxes with help of javascript
问题描述
I have html form with lots of checkboxes which are dynamically generated by PHP based on data in my mysql table.
我有很多复选框的 html 表单，这些复选框是由 PHP 根据我的 mysql 表中的数据动态生成的。 First 3 checkboxes (FBS, PPBS, RBS) are such that only one should be selected.前 3 个复选框（FBS、PPBS、RBS）只能选择一个。 if checkbox 1 is selected then 2 and 3 must be deselected, if 2 is selected then 1 and 3 must be deselected, if 3 is selected then 1 and 2 must be deselected.如果选中复选框 1，则必须取消选中 2 和 3，如果选中 2，则必须取消选中 1 和 3，如果选中 3，则必须取消选中 1 和 2。 so essentially either none of the first 3 checkboxes should be selected or only one.所以基本上前3个复选框都不应该被选中，或者只应该选中一个。
i cant use radio button as these checkboxes are dynamically generated.我不能使用单选按钮，因为这些复选框是动态生成的。 if i use radio button then there will be issue with rest of the checkboxes.如果我使用单选按钮，那么其余的复选框就会出现问题。 sample code is given below.示例代码如下。
<input type="checkbox" name="boxset[]" value="FBS" id="1"> FBS<br>
<input type="checkbox" name="boxset[]" value="PPBS (2 hrs)" id="2"> PPBS (2 hrs)<br>
<input type="checkbox" name="boxset[]" value="RBS" id="3"> RBS<br>
<input type="checkbox" name="boxset[]" value="SGOT" id="4"> SGOT<br>
<input type="checkbox" name="boxset[]" value="SGPT" id="5"> SGPT<br>
<input type="checkbox" name="boxset[]" value="ALP" id="6"> ALP<br>
<input type="checkbox" name="boxset[]" value="T. Protein" id="7"> T. Protein<br>
<input type="checkbox" name="boxset[]" value="S. Albumin" id="8"> S. Albumin<br>
<input type="checkbox" name="boxset[]" value="T. Bilirubin" id="9"> T. Bilirubin<br>
<input type="checkbox" name="boxset[]" value="D. Bilirubin" id="10"> D. Bilirubin<br>
<input type="checkbox" name="boxset[]" value="Urea" id="11"> Urea<br>
<input type="checkbox" name="boxset[]" value="Creatinine" id="12"> Creatinine<br>
<input type="checkbox" name="boxset[]" value="Sodium (Na+)" id="13"> Sodium (Na+)<br>
<input type="checkbox" name="boxset[]" value="Potassium (K+)" id="14"> Potassium (K+)<br>
<input type="checkbox" name="boxset[]" value="Chloride (Cl-)" id="15"> Chloride (Cl-)<br>
<input type="checkbox" name="boxset[]" value="Calcium" id="16"> Calcium<br>
<input type="checkbox" name="boxset[]" value="Phosphorous" id="17"> Phosphorous<br>
<input type="checkbox" name="boxset[]" value="Uric Acid" id="18"> Uric Acid<br>
<input type="checkbox" name="boxset[]" value="CPK" id="19"> CPK<br>
<input type="checkbox" name="boxset[]" value="CPK-MB" id="20"> CPK-MB<br>
<input type="checkbox" name="boxset[]" value="Cholesterol" id="21"> Cholesterol<br>
<input type="checkbox" name="boxset[]" value="Triglyceride" id="22"> Triglyceride<br>
<input type="checkbox" name="boxset[]" value="HDL" id="23"> HDL<br>
<input type="checkbox" name="boxset[]" value="LDL" id="24"> LDL<br>
<input type="checkbox" name="boxset[]" value="Amylase" id="25"> Amylase<br>
<input type="checkbox" name="boxset[]" value="Cholinesterase" id="26"> Cholinesterase<br>
<input type="checkbox" name="boxset[]" value="LDH" id="27"> LDH<br>
<input type="checkbox" name="boxset[]" value="T3-Total" id="28"> T3-Total<br>
<input type="checkbox" name="boxset[]" value="T4-Total" id="29"> T4-Total<br>
<input type="checkbox" name="boxset[]" value="TSH" id="30"> TSH<br>
<input type="checkbox" name="boxset[]" value="Vitamin B12" id="31"> Vitamin B12<br>
<input type="checkbox" name="boxset[]" value="25-OH-Vitamin D" id="32"> 25-OH-Vitamin D<br>
<input type="checkbox" name="boxset[]" value="FSH" id="33"> FSH<br>
<input type="checkbox" name="boxset[]" value="LH" id="34"> LH<br>
<input type="checkbox" name="boxset[]" value="Prolactin" id="35"> Prolactin<br>
<input type="checkbox" name="boxset[]" value="HbA1c" id="36"> HbA1c<br>
2 个解决方案
解决方案1
0 2019-01-01 11:41:14
Here is a piece of cake for you.这是给你的一块蛋糕。
$(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"> FBS<br> <input type="checkbox" name="boxset[]" value="PPBS (2 hrs)" id="2"> PPBS (2 hrs)<br> <input type="checkbox" name="boxset[]" value="RBS" id="3"> RBS<br>
解决方案2
0 2019-01-01 11:51:13
Check this Out https://jsfiddle.net/shoesheill/x4j750ov/4/看看这个https://jsfiddle.net/shoesheill/x4j750ov/4/
$('input[type="checkbox"]').off().on('click', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用 Javascript 或 jquery 从许多复选框中仅 select 一个复选框？ - How to select only one checkbox from many checkboxes with Javascript or jquery?
如何取消选中复选框列表中的一个复选框？ - How to uncheck only one checkbox in list of checkboxes?
如何从Knockout.js中的复选框列表中仅选择一个复选框 - How to select only a single checkbox from a list of checkboxes in Knockout.js
如果只从复选框列表中选中一个特定复选框，则Javascript返回 - Javascript returning if only one certain checkbox is checked out of a list of possible checkboxes
如何从复选框列表中仅选中一个复选框 - How to verify only one checkbox is selected from checkbox list
使用javascript / jQuery从列表中选择复选框 - select checkboxes from a list using javascript/jQuery
如何从映射的多个复选框中选择一个复选框 React.js - how to select one checkbox from a mapped multiple checkboxes React.js
当数据来自数据库时，如何仅选择一个复选框 - How to select only one checkbox when data comes from database
JavaScript 允许一个复选框或一组复选框 - JavaScript to allow either one checkbox or from a group of checkboxes
Select 组中只有一个复选框，但如果是某些复选框，则可以选择 select 多个复选框 - Select only one checkbox in a group but have option to select more than one if it's certain checkboxes
相关标签