如何获取中继器中复选框的唯一 ID？

Question

我的中继器位于用户控件中并使用 asp:repeater。这是我的代码：

 <asp:Repeater ID="rptrNotOnFile" Runat="server">
        <ItemTemplate>      
            <tr>
               <td>&nbsp;</td>
               <td>Item <asp:Label ID="NotOnFileItemNumber" Runat="server" />:
                   <asp:Label ID="lblPartNumberNotOnFile" Runat="server" />
               </td>
               <td>
                  <asp:Checkbox id="chkPartSelected" runat="server" onClick="isSamChecked()"/>
               </td>
               <td>
                   <asp:Checkbox id="chkPartWatchParts" runat="server"/>
               </td>               
               <td>
                   <asp:Checkbox id="samSelected" runat="server" onClick="isMbChecked()"/>
                                   </td>               
            </tr>   
        </ItemTemplate>        
    </asp:Repeater>

复选框 chkPartSelected 和 samSelected 在每个中继器项目中，我试图在选中另一个时取消选中一个，反之亦然。

这是我的 jquery 函数：

<script>
 function isMbChecked() {


         if ($('#ResultsNotOnFile_rptrNotOnFile_ctl01_chkPartSelected').is(":checked"))

             ($('#ResultsNotOnFile_rptrNotOnFile_ctl01_chkPartSelected').prop("checked", false))


     }
     function isSamChecked() {

               if ($('#ResultsNotOnFile_rptrNotOnFile_ctl01_samSelected').is(":checked"))

                   ($('#ResultsNotOnFile_rptrNotOnFile_ctl01_samSelected').prop("checked", false))

     }
</script>

当我硬编码转发器中每个复选框的唯一 ID 时，这些功能起作用，但我不希望它硬编码，因为我可以有一个或多个转发器项目。

我如何获取该唯一 ID 并将其传递给函数？

感谢您的帮助

杰格雷厄姆

Answer 1

如果我是你，我会放弃 ID，因为它们不是唯一的，并在其中添加一些类以使它们更易于识别。

例如

<asp:Checkbox runat="server" class="sam" onClick="isSamChecked()"/>
<asp:Checkbox runat="server" class="mb" onClick="isMbChecked()"/>

然后你可以做类似的事情

<script>
 function isMbChecked() {
   var closest = $(this).parent('td').siblings().children('.sam');
   closest.prop('checked', !closest.prop('checked'));
 }

 function isSamChecked() {
   var closest = $(this).parent('td').siblings().children('.mb');
   closest.prop('checked', !closest.prop('checked'));
 }
</script>

Answer 2

如果您使用的是 jQuery，则 onclick 函数可以替换为 jQuery 选择器，如下所示。首先取消选中所有复选框，然后仅选中在 jQuery 单击函数中使用 this（指向单击的复选框元素）关键字单击的复选框。 如果中继器具有唯一 id，则可以使用下面的选择器。

$('#rptrNotOnFile Checkbox[id="chkPartSelected"]').click (function() {

    $('checkbox').attr('checked',false);

    this.attr('checked',true);

})

Answer 3

以下是如何获取 ID 的 2 个示例。第一个是纯javascript。第二个 sn-p 使用 jQuery，需要在 .aspx 页面上进行一些修改。

<script type="text/javascript">
    function isChecked(element) {
        //set the checkbox names as fixed variables
        var checkbox1_name = "chkPartSelected";
        var checkbox2_name = "samSelected";

        //new variables for the id's to be found
        var checkbox1_id = "";
        var checkbox2_id = "";

        //split the id of element
        //looks something like this: mainContentPane_rptrNotOnFile_chkPartWatchParts_0
        var idArray = element.id.split('_');

        //loop all the items in the array to build the id's
        for (var i = 0; i < (idArray.length - 2) ; i++) {
            checkbox1_id += idArray[i] + "_";
            checkbox2_id += idArray[i] + "_";
        }

        //add the checkbox names and the last item of the array
        checkbox1_id += checkbox1_name + "_" + idArray[idArray.length - 1];
        checkbox2_id += checkbox2_name + "_" + idArray[idArray.length - 1];

        //set both checkboxed to unchecked
        document.getElementById(checkbox1_id).checked = false;
        document.getElementById(checkbox2_id).checked = false;

        //check the checkbox that was clicked
        element.checked = true;
    }
</script>

要使第一个示例正常工作，只需将 onClick="isSamChecked()" 更改为 onClick="isChecked(this)"

在第二个示例中，我们将使用中继器的行号来查找复选框的 ID。

首先在中继器<table id="rptrNotOnFile_table"> 周围的表中添加一个ID，因为中继器不会将其ID 添加到我们必须手动添加的页面中。 然后将行号作为模板<tr rownumber="<%# Container.ItemIndex %>"> 中的TR 属性。 复选框本身没有事件<asp:CheckBox ID="chkPartSelected" runat="server" />。

最后是脚本：

<script type="text/javascript">
    $(document).ready(function () {
        //bind a click function to the checkboxes in the table
        $("#rptrNotOnFile_table input[type='checkbox']").click(function () {
            //find the row number from the attribute of the above tr
            var rowNumber = $(this).closest('tr').attr("rowNumber");

            //the function bound to the click on the checkboxes
            isChecked(rowNumber)

            //check the checkbox that was clicked
            this.checked = true;
        })
    });

    function isChecked(rowNumber) {
        //set the id of the repeater as fixed variable
        var repeater_id = "<%= rptrNotOnFile.ClientID %>";

        //set the checkbox names as fixed variables
        var checkbox1_name = "chkPartSelected";
        var checkbox2_name = "samSelected";

        //new variables for the id's to be found
        var checkbox1_id = repeater_id + "_" + checkbox1_name + "_" + rowNumber;
        var checkbox2_id = repeater_id + "_" + checkbox2_name + "_" + rowNumber;

        //set both checkboxed to unchecked
        document.getElementById(checkbox1_id).checked = false;
        document.getElementById(checkbox2_id).checked = false;
    }
</script>

您可能可以更简单地执行此操作，就像其他 2 个答案所示。但由于问题是还要从重复数据（ListView、GridView、Repeater 等）的 asp.net 元素中获取 ID，所以我提供了这个相当广泛的答案。