//Get text of selected items
 $("#demo").click(function () {       
     $("[id*=CheckBoxList1] input:checked").each(function () {
         alert($(this).next().html());
     });
 });
//Check Items by index
   var selIndex = [0, 2, 3];
   for (var i = 0; i < selIndex.length; i++) {
       $("[id*=CheckBoxList1] input:checkbox").eq(selIndex[i]).prop('checked', true);
   }

  同样,你可以在prop()办法旅长第二个参数改为false来撤废对Checkbox的抉择。

Dictionary<int,string>  dictItems = new Dictionary<int,string>();
 dictItems.Add(1, "Item-1");
 dictItems.Add(2, "Item-2");
 dictItems.Add(3, "Item-3");
 dictItems.Add(4, "Item-4");
 dictItems.Add(5, "Item-5");

 CheckBoxList1.DataSource = dictItems;
 CheckBoxList1.DataTextField = "Value";
 CheckBoxList1.DataValueField = "Key";
 CheckBoxList1.DataBind(); 

  查看相应的HTML代码,你会意识Text的值被寄放在label控件中,该控件正好属于checkbox控件的下一个要素,因而大家得以经过$(this).next().html()措施来博取到它。

8. 最大选中项限制

//Check Items by value
   var selValue = [1, 2, 4];
   var $ctrls = $("[id*=CheckBoxList1]");
   for (var i = 0; i < selValue.length; i++) {
       $ctrls.find('input:checkbox[value=' + selValue[i] + ']').prop('checked', true);
   }

7. 经过Text属性选中Checkbox

<table id="MainContent_CheckBoxList1">
    <tr>
        <td><input id="MainContent_CheckBoxList1_0" type="checkbox" name="ctl00$MainContent$CheckBoxList1$0" value="1" /><label for="MainContent_CheckBoxList1_0">Item-1</label></td>
    </tr><tr>
        <td><input id="MainContent_CheckBoxList1_1" type="checkbox" name="ctl00$MainContent$CheckBoxList1$1" value="2" /><label for="MainContent_CheckBoxList1_1">Item-2</label></td>
    </tr><tr>
        <td><input id="MainContent_CheckBoxList1_2" type="checkbox" name="ctl00$MainContent$CheckBoxList1$2" value="3" /><label for="MainContent_CheckBoxList1_2">Item-3</label></td>
    </tr><tr>
        <td><input id="MainContent_CheckBoxList1_3" type="checkbox" name="ctl00$MainContent$CheckBoxList1$3" value="4" /><label for="MainContent_CheckBoxList1_3">Item-4</label></td>
    </tr><tr>
        <td><input id="MainContent_CheckBoxList1_4" type="checkbox" name="ctl00$MainContent$CheckBoxList1$4" value="5" /><label for="MainContent_CheckBoxList1_4">Item-5</label></td>
    </tr>
</table>
<input type="button" value="OK" id="demo" /> 

4. Check/Uncheck CheckBoxList的持有因素

jQuery,  注意索引是从0起始的,假设选中项是Item-1,Item-3,Item-4,则alert对话框中对应体现的始末是0,2,3.

 

//Get value of selected items
$("#demo").click(function () {      
    var selectedValues = [];
    $("[id*=CheckBoxList1] input:checked").each(function () {           
        selectedValues.push($(this).val());
    });
    if (selectedValues.length>0) {
        alert("Selected Value(s): " + selectedValues.toString());
    } else {
        alert("No item has been selected.");
    }
});
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
</asp:CheckBoxList>
<input type="button" value="OK" id="demo" />

3. 收获选中项的Text值

  jQuery
1.6上述版本采用prop()措施,1.6以下版本采取attr()方法。

//Get index of selected items
   $("#demo").click(function () {
       var $ctrls = $("[id*=CheckBoxList1] input:checkbox");
       $("[id*=CheckBoxList1] input:checked").each(function () {
          alert($ctrls.index($(this)));
       });       
   });

5. 经过索引选中Checkbox

  下边的代码中,如果Value值在selValue数组中设有则将相应的Checkbox选中。

  本文描述了什么通过jQuery来对ASP.NET
CheckBoxList控件举办部分基本操作,如通过value/text/index check/uncheck
CheckBoxList,最小/最大选项范围等。

  Server端代码:

  例如在ASP.NET页面中有如下CheckBoxList控件定义:

$("[id*=CheckBoxList1] input:checkbox").prop('checked',true); //To check all
$("[id*=CheckBoxList1] input:checkbox").prop('checked',false);// To uncheck all
//Check Items by Text
    var selText = ['Item-1','Item-3'];
    var $ctrls = $("[id*=CheckBoxList1]");
    for (var i = 0; i < selText.length; i++) {
        $ctrls.find('label:contains("' + selText[i] + '")').prev().prop('checked', true);
    }
$("[id*=CheckBoxList1] input:checkbox").change(function () {
          var maxSelection = 3;
          if ($("[id*=CheckBoxList1] input:checkbox:checked").length > maxSelection) {
              $(this).prop("checked", false);
              alert("Please select a maximum of " + maxSelection + " items.");
          }
      })

1. 收获选中项的Value值

  运行页面,在浏览器中您会看出上述代码会变卦如下HTML片段:

6. 经过Value属性选中Checkbox

2. 得到选中项的目录

   下边来探望怎么着通过jQuery对CheckBoxList控件举行操作。

  下边的代码会招来CheckBoxList控件所生成的HTML代码中对应的label元素,假诺该label元素的Text值在selText数组中存在则与之相应的Checkbox会被选中。本例中Item-1Item-3所对应的Checkbox会被选中。

  希望上边给出的代码能对常见编程工作提供一些相助!

  下面的代码允许CheckBoxList中最六只可以有3项同时被选中。同样,你可以对代码举行适当修改以实现最小选中项限制。

相关文章

网站地图xml地图