1

我的 HTML 看起来像这样（不幸的是它无法更改，因为它正在使用我正在使用的 CMS 呈现）：

<li>
<input id="cb1" type="checkbox">
<label for="cb1">
<div>Some Other Content</div>
<div class="pledge">Click to Pledge</div>
</label>
</li>

jQuery.

$("div.pledge").click(function() {

  var checkboxlabel = $(this).parent("label");

  $("input[for=checkboxlabel]").attr('checked', !$checkbox.attr('checked'));

});

如果我单击标签内的任何位置，使用此代码将切换复选框。我需要的是仅在单击<div class="pledge">元素时才发生操作。我怀疑 .stopPropagation(); 会在这里帮助我，但我无法让它正常工作。

这是另一个似乎正在实现相同想法的镜头：

$("div.pledge").click(function() {

  $("input[for=' + this.parent("label").attr("id") + ']").attr('checked', !$checkbox.attr('checked'));

});
4

5 回答 5

4

在字里行间阅读，在我看来，以下内容将在没有任何 JS 的情况下达到您想要的结果：

<li>
<input id="cb1" type="checkbox">
<div>
<div>Some Other Content</div>
<label for="cb1">Click to Pledge</label>
</div>
</li>

http://jsfiddle.net/nnnnnn/Vqmbb/

这会在复选框旁边显示“一些其他内容”和“单击以承诺”，但正如您在我的演示中看到的那样，只有“单击以承诺”部分在单击时选中/取消选中该框。

我已经交换了您的标签和“承诺” div，并利用标签的for属性将其与复选框相关联，以便它会自动选中/取消选中它。（虽然现在外部 div 实际上并没有做任何事情并且可以被移除，除非你需要它来进行样式设置。）

关于您的 JS，以下行有一些问题：

$("input[for=checkboxlabel]").attr('checked', !$checkbox.attr('checked'));

首先，您的选择器"input[for=checkboxlabel]"似乎试图使用checkboxlabel之前在行中声明的变量，但您实际上所做的只是包含一个恰好包含文本“checkboxlabel”的字符串。这样就不会在您的 html 中选择任何元素，因为您没有具有“for”属性等于字符串“checkboxlabel”的“input”元素。此外，您还有一个$checkbox未在任何地方定义的变量。

更新：好的，以下内容应该适用于您更新的 html（它对我有用）。您现有的 JS 代码的问题，除了您尝试使用$checkbox未声明的变量之外，您正在尝试将点击处理程序绑定到“承诺”div，这意味着您没有做任何事情来处理标签其他部分的点击。鉴于您特别想停止点击标签的其他部分，我建议您将.click()处理程序附加到标签上- 点击标签的子项将冒泡到标签的点击处理程序，因此您可以测试该元素是否被点击的是带有“承诺”类的那个。如果不返回false取消标签点击的默认行为，"pledge" 元素什么都不做，让默认值发生：

$("div.pledge").parent("label").click(function(e) {
    if (!$(e.target).hasClass("pledge"))
        return false;
});

（注意我选择了“div.pledge”的父级，而不是仅仅说$("label").click()这个处理不会附加到所有标签上。）

如果您不喜欢，我认为 mgibsonbr 的答案是一个不错的选择。

于 2012-02-12T02:52:17.980 回答
1

如果我理解正确，当您说“您不能更改 HTML”时，您的意思只是服务器生成的 HTML，对吗？但是您可以在客户端使用 JavaScript 更改它吗？

jQuery(document).ready(function($) {
    $('label[for="cb1"]').removeAttr("for");
    $("div.pledge").click(function() {
        $(this).parent().prev().attr("checked", function(index,oldValue) {
            return !oldValue;
        });
    });
});

这样标签就不再有 afor了，并且 div 点击是手动处理的。

于 2012-02-12T03:45:34.933 回答
0

在标签元素内移动复选框。您不需要任何 js，甚至 id 或 for 属性也不需要input和label元素。尝试这个。

<label>
    <input type="checkbox" />
    <div>Some Other Content</div>
    <div class="pledge">Click to Pledge</div>
</label>

演示

于 2012-02-12T03:10:55.677 回答
0

您的代码（HTML 和 JavaScript）均无效。
<label>是一个内部inline不能包含block元素的元素，例如<div>.
然后，您的 JS 代码缺少一些;（我看到您添加了它们）。此外，这没有任何意义：

$("input[for=checkboxlabel]").attr('checked', !$checkbox.attr('checked'))

这应该有效。注意新的 html 标签和正确的 jQuery 代码：

html:

<li>
    <label>Something that describes this checkbox</label>
    <input id="check" type="checkbox">
    <p>Some Other Content</p>
    <a href="#" id="pledge">Click to Pledge</a>
</li>

问：

$('#pledge').click(function()}{ $('#check').prop('checked', true); });
于 2012-02-12T02:42:22.607 回答
0

您没有以正确的方式进行此操作 - 您需要在标签中指定“for”属性并将其设置为您分配给它的复选框的 id，如下所示：

<label for="checkbox_id">Label-text</label>
<input type="checkbox" id="checkbox_id" />

当您单击标签时，这将选中/取消选中复选框。以上@elclanrs 提出的所有观点也成立，html 和js 无效。

于 2012-02-12T02:45:27.857 回答