Trying to have a link + checkbox, both clickable and text change on click

Question

Currently I'm just using jQuery to have a checkbox and a text, with the text to change after the checkbox is ticked, but I'm trying to work it so that the box OR text can be clicked and the result is changed text and checked box?

Can anybody assist me further?

Answer 1

just put a label text around the checkbox and text, so it becomes something like:

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

This makes the text part of the checkbox

Answer 2

see DEMO

in html

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

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

reference checked

jQuery.next()

Answer 3

using label and setting the for attribute, you can click at the text, and the box will be checked/unchecked...

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

Answer 4

HTML

For the HTML part, there are two ways to specify a label for an element:

1. Setting the label's for attribute to the element's id

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

2. Placing the element inside a label

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

I'll use the first one

JavaScript

Then you can use jQuery to handle the rest:

• First, make sure the DOM is loaded by wrapping your javascript in a .ready function (since we'll be looking to modify these elements).
• Then attach an event handler to the checkbox click event by using the .click function.
• Since we've set the for attribute for this particular label, we can use the attribute equals selector ([name="value"]) by looking for a label with the same for value as our calling element's id.
• You can check if the object that raised the event is checked on or off by using the :checked selector.
• You can use the Javascript's ternary operator to conditionally set each value
• Then rename the label using the .text function

It should all look like this:

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

Demo in 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 5

DEMO

Try this

$("#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>

Hope this helps,Thank you

Answer 6

You can associate onChange event to your checkbox , if it's checked , you show your text,else you show the link . DEMO HERE

HTML code:

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

JavaScript/jQuery Code :

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

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

});