CODEWITHSUNDEEP
javascriptjqueryasp.net
shalin gajjar
shalin gajjar

Reputation: 684

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

How to implement only one check box selected from Check Box list with java script.

Here is 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>

And here is my design:

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

However this script works fine with One CheckBox list but when I just want to same thing to other CheckBox List then it's works with 4 one.

Upvotes: 0

Views: 745

Answers (3)

Iti Tyagi
Iti Tyagi

Reputation: 3661

First of all the code will not compile as you have same name for the CheckBoxList. Change the name of the second checkbox list and then try running the script, as there is no problem with the 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="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>

Upvotes: 0

Tieson T.
Tieson T.

Reputation: 21201

Checkboxes imply that more than one choice can be made. If you only want to allow a single choice, use the RadioButtonList control: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.radiobuttonlist%28v=vs.110%29.aspx

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

It is what radio boxes are for...

but if you want to continue using checkboxes, a jQuery based solution can be to target only checked checkboxes within the same td

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

Upvotes: 0

Related Questions