javascript - 连续检查各个复选框

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 %>');返回什么，但是我知道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]')-此选择器在页面中找到具有 <input>属性并以“ Cb1”结尾的所有 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()）到“单元格” div（第二个 .parent()）到“行” div（第三个 ）。
.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属性的值。