尝试使用链接+复选框，单击时可点击和文本更改

Question

目前我只是使用jQuery来创建一个复选框和一个文本，勾选复选框后要更改文本，但我正在尝试使用它以便可以单击框或文本，结果是更改了文字和复选框？

有人可以进一步帮助我吗？

Answer 1

只需在复选框和文本周围添加标签文字，即可：

    <label><input type="checkbox" />Add to cart</label>

这使得文本成为复选框的一部分

Answer 2

请参阅DEMO

in html

<input type="checkbox" id="test"> <label for="test">text</label>

JS中的

$(document).ready(function () {
  $("#test").click(function () {
    if ($(this).is(":checked")) {
      $(this).next("label").text("Added");
    } else {
      $(this).next("label").text("Add to Cart"); // your default color set
    }
  });
});

参考 checked

的jQuery。的 next()

Answer 3

使用标签并设置for属性，您可以单击该文本，该框将被选中/取消选中...

<label for="check1">Label for checkbox</label> 
<input type="checkbox" id="check1" value="value1">Option</input>

Answer 4

HTML 非常简单。有two ways to specify a label for an element（因此点击任一字段都会更新复选框）：

1. 将标签的for属性设置为元素的ID
2. 将元素放置在标签内

我将使用第一个，因此标记应如下所示：

<input type='checkbox' id='chkCart' />
<label for='chkCart'>Add to Cart</label>

您可以使用 jQuery 来处理剩下的事情：

• 首先，确保通过将javascript包装在.ready函数中来加载DOM（因为我们将要修改这些元素）。
• 然后使用.click函数将事件处理程序附加到复选框单击事件。
• 由于我们为此特定标签设置了for属性，因此我们可以通过查找具有相同{{1}的标签来使用attribute等于选择器（[name="value"]） } value作为我们的调用元素for。
• 您可以使用:checked选择器检查引发或关闭引发事件的对象。
• 您可以使用Javascript的ternary运算符有条件地设置每个值
• 然后使用.text函数
重命名标签

它应该都是这样的：

id

jsFiddle Demo

Answer 5

DEMO

试试这个

$("#chk").click(function () {

    if ($(this).is(":checked")) {
        $(this).next().fadeOut("slow", function () {
            $("#chk").next().text("Added");
        }).fadeIn("slow");

    } else {

        $(this).next().fadeOut("slow", function () {
            $("#chk").next().text("Add to cart");
        }).fadeIn("slow");
    }

});

HTML

<input type="checkbox" id="chk">
<label for="chk" style="text-decoration:underline">Add to cart</label>

希望这有帮助，谢谢

Answer 6

您可以将onChange事件与您的复选框相关联，如果已选中，则会显示您的文字，否则您会显示该链接。的 DEMO HERE

HTML code：

<input type='checkbox' id='check'/>
<label><a href='#'>add to cart</a></label>

JavaScript / jQuery代码：

$('#check').change(function(){

  if ($(this).is(":checked")) $(this).next().text('added');
  else $(this).next().html("<a href='#'>add to cart</a>");

});