连续选中相应的复选框

Checking the respective checkbox in a row

本文关键字：复选框 连续      更新时间：2023-09-26
I have a datalist like
Checkbox1 CHeckbox2 Label1
Checkbox1 CHeckbox2 Label2
Checkbox1 CHeckbox2 Label3

我希望如果我选择第一行的复选框 1，那么我的第一行复选框 2 应该只被选中，而不是其他。

C# 代码：

<asp:DataList runat="server" ID="dl1" OnItemDataBound="cb1">               
    <ItemTemplate>
        <div style="display: table;">
            <div style="display: table-row;">
                <div style="display: table-cell;">
                    <asp:CheckBox ID="Cb1" runat="server"/>
                </div>
                <div style="display: table-cell;">
                    <asp:CheckBox ID="cb2" runat="server" />
                </div>
            </div>
        </div>
    </ItemTemplate>
</asp:DataList>

当我尝试这个时： 

var d1Control = document.getElementById('<%= dl1.ClientID %>');
$('input:checkbox[id$=Cb1]', d1Control).click(function (e) {
    if (this.checked) {
        $('input:checkbox[id*=cb2]', d1Control).prop('checked', true);
    }

所有行中的所有复选框 2 都将被选中。

我什至试过这个，但没有结果

$('input:checkbox[id*=cb2]').eq(0).find(':checkbox').prop('checked', true);

网页代码 ：如果这个代码你可以读：

<td>
    <div style="display: table;">
        <div style="display: table-row;">
            <div style="display: table-cell;">
                <span style="border-style: groove; display: inline-block;">
                    <input name="wAr$ucAr$dl1$ctl00$Cb1" class="rfdRealInput" id="wAreas_ Cb1" type="checkbox" _rfddecoratedID="_rfdSkinnedwA_ucA_dl1_ctl00_Cb1">
                    <label class=" rfdCheckboxUnchecked" id="_rfdSkinnedwAreas_ucAvailableWidgetSelector_dl1_ctl00_Cb1" for="wAreas_ucAvailableWidgetSelector_dl1_ctl00_Cb1" unselectable="on">&nbsp;</label>
                </span>
            </div>
            <div style="display: table-cell;">
                <input name="wA$ucAr$dl1$ctl00$cb2" class="rfdRealInput" id="wAreas_ucAr_dl1_ctl00_cb2" type="checkbox" CHECKED="checked" _rf="_rfd_ucAr_dl1_ctl00_cb2">
                <label class=" rfdCheckboxChecked" id="_rfd_ucA_dl1_ctl00_cb2" for="wA_ucAr_dl1_ctl00_cb2" unselectable="on">&nbsp;</label>
            </div>
            <input name="wA$ucAr$dl1$ctl00$hfWidgetID" id="wAs_ucA_dl1_ctl00_hfW" type="hidden" value="9">                            
            <div style="display: table-cell;">
                <span id="wAs_ucAr_dl1_ctl00_lblMessage" style="padding: 2px; white-space: nowrap;">2<sup>nd</sup> Sourcing</span>
            </div>
        </div>
    </div>
</td>
嗯

，很难确定，因为我不知道ASP，所以（1）我看不到你的实际HTML，（2）我不知道document.getElementById('<%= dl.ClientID %>');返回什么，但我确实知道JS和jQuery，我猜你的选择有范围问题。 :)

我敢打赌，d1Control没有充分缩小选择器中的范围，并且在您使用$('input:checkbox[id*=cb2], d1Control)时正在执行全局选择。 因此，您不会只获得行中的一个"cb2"复选框，而是获得所有这些复选框。

好消息是，您不需要使用d1Control。 。只需根据其与实际单击的任何"Cb1"复选框的关系找到"cb2"复选框即可。 喜欢这个：

$('input:checkbox[id$=Cb1]').click(function (e) {
    if ($(this).prop("checked")) {
        $(this).parent().find('input:checkbox[id*=cb2]').prop('checked', true);
    }
});

这将在单击第一个复选框时选中行中的第二个复选框。 或者，如果您希望第二个复选框选中并取消选中第一个复选框，请使用以下代码：

$('input:checkbox[id$=Cb1]').click(function (e) {
    $(this).parent().find('input:checkbox[id*=cb2]').prop('checked', $(this).prop("checked"));
});

编辑#1：

给定输出 HTML 的格式，需要几个额外的.parent()方法调用才能达到正确的级别：

"仅检查"代码：

$('input:checkbox[id$=Cb1]').click(function (e) {
    if ($(this).prop("checked")) {
        $(this).parent().parent().parent().find('input:checkbox[id*=cb2]').prop('checked', true);
    }
});

"选中和取消选中"代码：

$('input:checkbox[id$=Cb1]').click(function (e) {
    $(this).parent().parent().parent().find('input:checkbox[id*=cb2]').prop('checked', $(this).prop("checked"));
});

如果有一种方法可以将ASP代码更改为我们实际的表元素（例如，td和"tr"而不是<div style="display: table-row;">和<div style="display: table-cell;">），甚至是类来设置<div>的样式，而不是内联样式，则可以进一步简化代码。 但是，由于您主要使用<div>标签，几乎没有容易识别的属性，因此您必须依靠根据它们在 DOM 中的位置来关联两个输入。

编辑#2（解释:)）：

代码的工作方式是这样的：

  • $('input:checkbox[id$=Cb1]') - 此选择器查找页面中具有以"Cb1"结尾的id属性的所有<input>标签
  • .click(function (e) { - 这会为选择器找到的每个元素添加一个方法，当单击该元素时触发（老实说，使用 .change 可能更合适，但在这种情况下，效果是相同的）
  • if ($(this).prop("checked")) { - 这将检查单击的复选框是否"选中"。 由于此代码将在单击任何一个"Cb1"复选框时运行，因此$(this)让代码知道这次实际单击了哪个复选框。
  • $(this).parent().parent().parent() - 这会爬上 DOM 层次结构以查找充当"表行"（例如，<div style="display: table-row;"> 的<div>，因为这是包含该行中的"Cb1"复选框和"cb2"复选框的第一个元素。 它从复选框（$(this)）爬到跨度（第一个.parent()）到"单元格"div（第二个.parent()）到"行"div（第三个.parent()）。
  • .find('input:checkbox[id*=cb2]') - 现在您已经到达了也包含"cb2"复选框的元素，这将搜索它。 从您提供的 HTML 来看，您也可以与第一个选择器保持一致并使用[id$=cb2]（即"结尾"），而不是[id*=cb2]（即"包含"）。
  • .prop('checked', true) - 这会选中"CB2"复选框。
"仅检查"版本

和"检查并取消选中"版本之间有两个主要区别：

  • 不需要if ($(this).prop("checked")) {逻辑，因为您将始终设置"cb2"复选框的checked属性以匹配"cb1"复选框的值
  • .prop('checked', true)替换为.prop('checked', $(this).prop("checked")) - 这会将"cb2"复选框的checked值设置为等于单击的"Cb1"复选框的checked属性的值。
相关文章：