如何僅實現一個複選框選擇功能到Chekc框列表？

Question

如何僅使用java腳本實現從複選框列表中選中的一個複選框。

下面是腳本：

<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個。

Answer 1

這是什麼單選按鈕是...

，但如果你想繼續使用複選框，基於jQuery的解決辦法只能是目標在同一td

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

Answer 2

複選框選中的複選框意味着可以做出一個以上的選擇。如果您只想允許單選，請使用RadioButtonList控件：http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.radiobuttonlist%28v=vs.110%29.aspx

Answer 3

首先，由於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>