如何使用 jQuery 检查 ASP.NET CheckBoxList

Question

我正在使用 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，但是在调试时我们得到的是空字符串，因此我无法检查我的特定项目？

请帮助我哪里做错了？

Answer 1

我在这里创建了一个函数，它将检查任何 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>