如何实现只有一个复选框被选中的功能到复选框列表

How to implement only one check box selected functionality to Chekc box list?

本文关键字：复选框 功能 列表 有一个 何实现 实现      更新时间：2023-09-26

如何用java script实现从复选框列表中只选中一个复选框

脚本如下:

<script language="javascript" type="text/javascript">
var previousCheckId;
     function toggle(chkBox) {
         if (chkBox.checked) {
              if (previousCheckId) {
                   document.getElementById(previousCheckId).checked = false;
              }
              previousCheckId = chkBox.getAttribute('id');
         }
     }
</script>

这是我的设计:

<tr>
    <td class="BlackTextBold" align="right" height="25" width="32%"><div align="left"><strong>
        Product :</strong><span class="top-txt"><span style="font-size: 12.0pt; font-family: Tahoma,sans-serif; color: red">*</span></span></div></td>
    <td height="20" width="68%">
         <asp:CheckBoxList ID="chkLst" runat="server" Font-Bold="True" 
             RepeatDirection="Horizontal" Width="50%">
             <asp:ListItem onClick="toggle(this);" Value="EasyOFFICE">EasyOFFICE</asp:ListItem>
             <asp:ListItem onClick="toggle(this);" Value="EasyVAT">EasyVAT</asp:ListItem>
         </asp:CheckBoxList>
     </td>
  </tr>
  <tr>
    <td class="BlackTextBold" align="right" height="25" width="32%"><div align="left"><strong>
        PC Type :</strong><span class="top-txt"><span style="font-size: 12.0pt; font-family: Tahoma,sans-serif; color: red">*</span></span></div></td>
    <td height="20" width="68%">
         <asp:CheckBoxList ID="chkLst" runat="server" Font-Bold="True" 
             RepeatDirection="Horizontal" Width="30%">
             <asp:ListItem onClick="toggle(this);" Value="Server">Server</asp:ListItem>
             <asp:ListItem onClick="toggle(this);" Value="LAN">LAN</asp:ListItem>
         </asp:CheckBoxList>
     </td>
  </tr>

然而，这个脚本工作良好与一个复选框列表，但当我只是想同样的事情到其他复选框列表，然后它的作品与4一个。

复选框意味着可以做出多个选择。如果你只想允许一个选择，使用RadioButtonList控件:http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.radiobuttonlist%28v=vs.110%29.aspx

单选框是用来…的

，但是如果你想继续使用复选框，基于jQuery的解决方案可以只针对同一个td

中的复选框。
function toggle(chkBox) {
    if (chkBox.checked) {
        $(this).closest('td').find('input[type="checkbox"]:checked').not(this).prop('checked', false)
    }
}

首先，由于CheckBoxList的名称相同，代码将无法编译。更改第二个复选框列表的名称，然后尝试运行脚本，因为脚本没有问题。

<tr>
<td class="BlackTextBold" align="right" height="25" width="32%"><div align="left"><strong>
    Product :</strong><span class="top-txt"><span style="font-size: 12.0pt; font-family: Tahoma,sans-serif; color: red">*</span></span></div></td>
<td height="20" width="68%">
     <asp:CheckBoxList ID="chkLst" runat="server" Font-Bold="True" 
         RepeatDirection="Horizontal" Width="50%">
         <asp:ListItem onClick="toggle(this);" Value="EasyOFFICE">EasyOFFICE</asp:ListItem>
         <asp:ListItem onClick="toggle(this);" Value="EasyVAT">EasyVAT</asp:ListItem>
     </asp:CheckBoxList>
 </td>
 </tr>
  <tr>
<td class="BlackTextBold" align="right" height="25" width="32%"><div align="left"><strong>
    PC Type :</strong><span class="top-txt"><span style="font-size: 12.0pt; font-family: Tahoma,sans-serif; color: red">*</span></span></div></td>
<td height="20" width="68%">
     <asp:CheckBoxList ID="chkLst1" runat="server" Font-Bold="True" 
         RepeatDirection="Horizontal" Width="30%">
         <asp:ListItem onClick="toggle(this);" Value="Server">Server</asp:ListItem>
         <asp:ListItem onClick="toggle(this);" Value="LAN">LAN</asp:ListItem>
     </asp:CheckBoxList>
 </td>

相关文章：