如何使用 jQuery 检查 ASP.NET CheckBoxList

问题描述

我正在使用 ASP.NET CheckBoxList 进行多选项目，我在页面加载时在服务器端绑定此 CheckBoxList，我有一个输入按钮作为编辑按钮，我想在单击编辑时显示选中的复选框列表项按钮。为此，我正在尝试这样：

复选框

<div id="checkboxplant" style="width: 100%; height: 150px; overflow: auto">
<asp:CheckBoxList ID="chkPlantsAddNew" CssClass="MyClass" runat="server">
</asp:CheckBoxList></div>

AJAX

   function OnSuccessRecordCall(data,status) {
        result = Record;
        if (result != undefined && result.length > 0) {
            var checkboxList = $("[id*=chkPlantsAddNew]");
            checkboxList.each(function () {
                        if ($(this).val() == $.trim(result.PLANT_CODE_EDIT)) {
                        $(this).prop("checked",true);
                    }
            });
        }
    }

第一行和第二行的 DOM

<tr>
    <td><input id="chkPlantsAddNew_0" type="checkbox" name="chkPlantsAddNew$0"><label for="chkPlantsAddNew_0">1001</label></td>
</tr>
<tr>
<td><input id="chkPlantsAddNew_1" type="checkbox" name="chkPlantsAddNew$1"><label for="chkPlantsAddNew_1">CPP</label></td>
</tr>

在浏览器上调试时，我可以看到 CheckBoxList 值没有显示任何值，它只是显示 "" 字符串。为什么这样？我不知道为什么会这样？

请参阅下面的屏幕截图，因为我为该文本选择了第一个 tr 为 1001，值为 0，但在调试时我们得到空字符串，因此我无法检查我的特定项目?

请帮助我哪里做错了？

解决方法

我在这里创建了一个函数，该函数将检查具有给定值标签的任何 CheckBoxList 中的复选框。所以你不需要循环或任何东西；它将找到带有包含给定值文本的标签的复选框，并选中该复选框。

我不明白你的其余代码是如何工作的，但这应该足以让你继续前进。

按钮只是展示功能的例子。

function checkCheckboxWithValue(value) {
  $('input:checkbox + label').filter(':contains("' + value + '")').prev(':checkbox').prop('checked',true);
}
$('button').on('click',function() {
  var value = $(this).text();
  checkCheckboxWithValue(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input id="chkPlantsAddNew_0" type="checkbox" name="chkPlantsAddNew$0"><label for="chkPlantsAddNew_0">1001</label></td>
  </tr>
  <tr>
    <td><input id="chkPlantsAddNew_1" type="checkbox" name="chkPlantsAddNew$1"><label for="chkPlantsAddNew_1">CPP</label></td>
  </tr>
</table>

<button id="chk1001">1001</button>
<button id="chkCPP">CPP</button>