javascript - 试图有一个链接+复选框，点击时可点击和文本都发生变化

Question

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

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

Answer 1

只需在复选框和文本周围放置一个标签文本，它就变成了这样：

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

这使得复选框的文本部分

Answer 2

见演示

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

参考 检查

jQuery。下一个（）

Answer 3

HTML

对于HTML部分，有两种方法可以为元素指定标签：

1. 将标签的for属性设置为元素的 id

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

2. 将元素放置在标签内

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

我会用第一个

JavaScript

然后你可以使用jQuery来处理其余的：

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

它应该看起来像这样：

$(function () {
    $("#chkCart").click(function () {
        var lbl = $(`label[for='${this.id}']`);
        var msg = this.checked ? "Added" : "Add to Cart"
        lbl.text(msg);
    });
});

Stack Snippets 和jsFiddle中的演示

$(function () {
    $("#chkCart").click(function () {
        var lbl = $(`label[for='${this.id}']`);
        var msg = this.checked ? "Added" : "Add to Cart"
        lbl.text(msg);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

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

Answer 4

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

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

Answer 5

演示

尝试这个

$("#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 事件与您的复选框相关联，如果选中，则显示文本，否则显示链接。在这里演示

HTML 代码：

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

});