Javascript 选中一行中相应的复选框

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

C#代码：

I have a datalist like

Checkbox1 CHeckbox2 Label1
Checkbox1 CHeckbox2 Label2
Checkbox1 CHeckbox2 Label3

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

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

HTML代码： 如果您可以阅读此代码：

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

第二次采购

嗯，很难说清楚，因为我不懂ASP，所以（1）我看不到您实际的HTML，以及（2）我不知道什么是

document.getElementById（“”）正在返回，但我知道JS和jQuery，我猜您的select存在范围问题。：）

我敢打赌，
d1Control
并没有充分缩小选择器中的范围，当您使用
$（'input:checkbox[id*=cb2]，d1Control）
时，它正在进行全局选择。因此，不是只获取行中的一个“cb2”复选框，而是获取所有复选框

好的是，您不需要使用
d1Control
。只需根据“cb2”复选框与实际单击的“Cb1”复选框之间的关系查找“cb2”复选框。像这样：

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

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

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

编辑#1:

I have a datalist like

Checkbox1 CHeckbox2 Label1
Checkbox1 CHeckbox2 Label2
Checkbox1 CHeckbox2 Label3

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

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

考虑到输出HTML的格式，需要进行两个额外的
.parent（）
方法调用，才能使您达到正确的级别：

“仅检查”代码：

I have a datalist like

Checkbox1 CHeckbox2 Label1
Checkbox1 CHeckbox2 Label2
Checkbox1 CHeckbox2 Label3

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

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

“勾选和取消勾选”代码：

I have a datalist like

Checkbox1 CHeckbox2 Label1
Checkbox1 CHeckbox2 Label2
Checkbox1 CHeckbox2 Label3

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

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

如果有一种方法可以将ASP代码更改为实际的表元素（例如，
td
和'tr'而不是
和
），甚至可以将类更改为
的样式，而不是内联样式，那么代码可以进一步简化。但是，由于您主要使用的是
标记，几乎没有容易识别的属性，因此您必须依赖于根据两个输入在DOM中的位置来关联它们

编辑#2（解释：）：

I have a datalist like

Checkbox1 CHeckbox2 Label1
Checkbox1 CHeckbox2 Label2
Checkbox1 CHeckbox2 Label3

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

$('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]'）
-此选择器查找页面中所有具有以“Cb1”结尾的
id属性的标签
.click（函数（e）{
-这会向选择器找到的每个元素添加一个方法，当该元素被单击时会触发（老实说，使用
.change
可能更合适，但在这种情况下效果相同）
if（$（this）.prop（“checked”）{
-检查单击的复选框是否为“checked”。由于此代码将在单击任何一个“Cb1”复选框时运行，
$（this）
让代码知道其中哪一个是这次实际单击的复选框
$（this）.parent（）.parent（）.parent（）
-这将爬升DOM继承权，以查找充当“表行”（例如，
）的
，因为这是第一个包含该行的“Cb1”复选框和“cb2”复选框的元素。它从复选框（
$（this）
）爬升到范围（第一个
.parent（）
）到“cell”div（第二个
.parent（）
）到“row”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
属性值相等
无法
在checkbox@charlietfl.如果我执行$（'input:checkbox[id*=cblAvailableWidgetSelector]）.eq（1）.prop（'checked'，true）；然后选中顶部的复选框。但不是同一行对应的复选框。你能告诉我什么是35;选中第二个复选框吗？对不起，我不明白。我应该保留什么？哎呀！我的坏…那是我本地测试的结果，用于识别我创建的表。：D删除它。我选中了，它进入了最后一个循环（保持警惕并看到），但是第二个复选框没有被选中。你能提供ASP产生的实际HTML吗？如果我知道代码将要处理的实际DOM结构，我可以给你一个更好的答案。C代码只是实际的HTML。它里面有一个数据列表