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

Posted 2023-02-22

【中文标题】试图有一个链接+复选框，点击时可点击和文本都发生变化

【英文标题】：Trying to have a link + checkbox, both clickable and text change on click

【发布时间】：2013-08-29 00:45:00

【问题描述】：

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

谁能进一步帮助我？

【问题讨论】：

请发布您已经尝试过的代码。

到目前为止你尝试了什么？

【参考方案1】：

html

对于HTML部分，有two ways to specify a label for an element:

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

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

将元素放置在标签内

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

我会用第一个

javascript

然后你可以使用 jQuery 来处理剩下的：

首先，确保通过将您的 javascript 包装在

.ready

函数中来加载 DOM（因为我们将要修改这些元素）。 然后使用

.click

函数将事件处理程序附加到复选框单击事件。 由于我们已经为这个特定标签设置了for 属性，我们可以使用

attribute

等于选择器([name="value"]) 通过查找与调用元素的@987654339 具有相同for 值的标签@。 您可以使用

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

堆栈片段中的演示和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>

【参考方案2】：

见DEMO

在 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()

【讨论】：

除非您需要，否则您不应该使用prev 或next 来依赖元素的顺序。见Select the associated label element of a input field。此外，没有解决 OP 关于如何更改标签 text

的问题

【参考方案3】：

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

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

);

【参考方案4】：

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>

希望对你有帮助，谢谢

【参考方案5】：

使用label并设置for属性，可以点击文字，框会被选中/取消选中...

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

【参考方案6】：

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

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

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