Question

I have a datalist like

Checkbox1 CHeckbox2 Label1
Checkbox1 CHeckbox2 Label2
Checkbox1 CHeckbox2 Label3

我希望如果我选择第一行的Checkbox1，那么我的第一行Checkbox2应该只被选中而不能选择其他行。

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);
    }

所有行中的所有Checkbox2都被选中。

我甚至试过这个，但不是结果

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

HTML代码：如果这个代码你可以阅读：

<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>

Answer 1

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

我认为d1Control并未在选择器中充分缩小范围，并且当您使用$('input:checkbox[id*=cb2], d1Control)时它正在进行全局选择。因此，不是只获得行中的一个“cb2”复选框，而是获得所有这些复选框。

好消息是，您不需要使用d1Control。。。只需找到“cb2”复选框，根据它与实际点击的“Cb1”复选框的关系。像这样：

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

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

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

“仅限检查”版本与“检查和取消选中”版本之间存在两个主要差异：

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

检查连续的相应复选框

1 个答案: