使用C＃在複選框列表中選擇單個項目＃

Question

我正在使用asp.net頁面中的複選框列表並綁定來自數據庫的數據。現在我想選擇單個項目。假設我選擇一個項目意味着清除舊選擇並選擇新項目只有

請幫我做..

Answer 1

嘗試此

前端

function radioMe(e) { 
    if (!e) e = window.event; 
    var sender = e.target || e.srcElement; 

    if (sender.nodeName != 'INPUT') return; 
    var checker = sender; 
    var chkBox = document.getElementById('<%= chks.ClientID %>'); 
    var chks = chkBox.getElementsByTagName('INPUT'); 
    for (i = 0; i < chks.length; i++) { 
     if (chks[i] != checker) 
     chks[i].checked = false; 
    } 
} 

<asp:CheckBoxList runat="server" ID="chks"> 
    <asp:ListItem>Item</asp:ListItem> 
    <asp:ListItem>Item</asp:ListItem> 
    <asp:ListItem>Item</asp:ListItem> 
    <asp:ListItem>Item</asp:ListItem> 
</asp:CheckBoxList> 

後端

protected void Page_Load(object sender, EventArgs e) 
{ 
     chks.Attributes.Add("onclick", "radioMe(event);"); 
} 

但是在做這一切，你應該考慮RadioButtonList控制

Answer 2

貌似RadioButtonList會更適合，因爲它只是讓你選擇一個元素。

ASP.NET RadioButtonList Control

無線電Buttonlist Sample

RadioButtonList Class

Answer 3

使用在RadioButtonList的一個的CheckBoxList可有時方便，因爲它允許用戶取消選擇的選擇，而不必給我發明一個解決方法。遵循瑜珈的回答，我想要一種方法，允許輕鬆重用，而不必將CheckBoxList的ClientID插入到每個用途的函數中。感謝模板瑜伽師。

• 用法：

  <asp:CheckBoxList ID="m_testControl" runat="server" data-toggle="radio" RepeatDirection="Horizontal"> 
      <asp:ListItem Value="CON">Concur</asp:ListItem> 
      <asp:ListItem Value="CWI">Concur With Intent</asp:ListItem> 
      <asp:ListItem Value="DNC">Do Not Concur</asp:ListItem> 
  </asp:CheckBoxList> 
  

• JQuery的功能：

  $(document).ready(function() 
  { 
      // turn all CheckBoxLists labeled for 'radio' to be single-select 
      $('[data-toggle=radio]').each(function() 
      { 
       var clientId = $(this).attr('id'); 
       $(this).find('input').each(function() 
       { 
        // set parent's id 
        $(this).attr('data-parent', clientId); 
  
        // add an onclick to each input 
        $(this).click(function (e) 
        { 
         // ensure proper event 
         if (!e) e = window.event; 
         var sender = e.target || e.srcElement; 
         if (sender.nodeName != 'INPUT') return; 
  
  
         // toggle off siblings 
         var id = $(this).attr('id'); 
         var parent = $(this).attr('data-parent'); 
         $('input[data-parent=' + parent + ']').not('#' + id).prop('checked', false); 
        }); 
       }); 
      }); 
  }); 
  

Answer 4

$('input[type=checkbox]').click(function() { 
      var chks = document.getElementById('<%= chkBranchRoleTransaction.ClientID %>').getElementsByTagName('INPUT'); 
      for (i = 0; i < chks.length; i++) { 
        chks[i].checked = false; 
      } 
      $(this)[0].checked = true; 
     }); 
     // or// 
     $('input[type=checkbox]').click(function() { 
      var chkBox = document.getElementById('<%= chkBranchRoleTransaction.ClientID %>'); 
      var chks = chkBox.getElementsByTagName('INPUT'); 
      for (i = 0; i < chks.length; i++) { 
       chks[i].checked = false; 
      } 
      $(this)[0].checked = true; 
     }); 
    });[enter image description here][1] 


    [1]: http://i.stack.imgur.com/zzaaz.jpg 

Answer 5

var id = ""; 
$("#CblProduct").on('click', ':checkbox', function() {  
    if (id != "") 
    { 
     $(id).attr('checked', false); 
     $(this).attr('checked', true); 
    } 
    if($("#CblProduct").length > 0) 
    { 
     id = this; 
    } 
}); 

Answer 6

static int indexOfL=0;// the index of initial selected item 
    protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e) 
    { 
     int i = 0; 

     foreach (ListItem li in CheckBoxList1.Items) 
     {  
      { 
       if (i != indexOfL && li.Selected) 
       {  
        indexOfL=i; 
        CheckBoxList1.ClearSelection(); 
        li.Selected = true; 

       } 
       i++; 
      } 
     }} 

我保存所選項目的索引，當有變化時，我們得到兩個選定的項目，所以在indexOfL的幫助下，我們得到了正確的項目。 我不「知道，如果這種方式是最好的，因爲這個代碼在服務器端運行.... 希望它可以幫助...