append text when checkbox is checked

Question

I'm having an issue while trying to append text to a label when the checkbox is checked. When I submit the form the text is sent to an e-mailadress that is entered by the user with Mandrill.

The problem that I'm facing is that I always get the false value even if I have checked the checkbox. I have already looked at the "Check checkbox checked property" but none of the solutions work in my case. I have the following html & jQuery:

HTML:

<form id="vcardForm" method="post">
<input id="chkbox1" type="checkbox" />
<label id="lbl1"></label>
<input type="submit" id="submitbtn"/>

jQuery:

<script>
if($('#chkbox1').is(':checked')) {
 $('#lbl1').append("\n Checked is true!");
}else {
  $('#lbl1').append("\n Checked is false!");
}

    </script>

Any help would be greatly appreciated

Thanks.

I seem to have forgotten to include it in my post, my bad. In my code it is included so that isn't the problem. — brasay
– brasay, Commented Jan 19, 2015 at 15:35
Its okay :) I do it all the time. I think you need an event to occur for this to work efficiently. Check out my answer below. — Master Yoda
– Master Yoda, Commented Jan 19, 2015 at 15:44

Master Yoda · Accepted Answer · 2015-01-19 15:48:13Z

2

How about something like this? Where the event is on the checkbox?

HTML

<form id="vcardForm" method="post">
    <input id="chkbox1" type="checkbox" /> Check <br />
    <label id="lbl1"></label>
    <input type="submit" id="submitbtn" text="submit" />
</form>

CSS

$("#chkbox1").click( function()
{
    if($('#chkbox1').is(':checked')) 
    {
     $('#lbl1').text("Checked is true!");
    }
    else 
    {
      $('#lbl1').text("Checked is false!");
    }
});

Fiddle demo

edited Jan 19, 2015 at 15:48

answered Jan 19, 2015 at 15:43

Master Yoda

4,42212 gold badges46 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

brasay Over a year ago

I've tried it and it works, thank you so much. I've been searching for hours for an answer

Master Yoda Over a year ago

You are welcome. If I may, I would use classes to achieve this functionality in case you need to use it in more than one place. For example if you have more than one checkbox or if you use the functionality on other pages. Good luck

Akmal Arzhang · Accepted Answer · 2015-01-19 15:42:44Z

0

$('#chkbox1').change(function(){
    if($('#chkbox1').is(':checked')) {
    $('#lbl1').append("\n Checked is true!");
  }else {
    $('#lbl1').append("\n Checked is false!");
  }
});

Try this and your problem is solved!

answered Jan 19, 2015 at 15:42

Akmal Arzhang

1221 silver badge9 bronze badges

1 Comment

Master Yoda Over a year ago

By doing this you are actually appending the text over and over again. Might want to clarify with the OP that this is what they are looking for.

Ankita.P · Accepted Answer · 2015-01-19 15:48:19Z

0

You need to use on click of check box first and then check for is checked . Below is the code or u can refer this js fiddle

$(document) .ready(function(){
$('#chkbox1').on('click',function(){
    if($(this).is(':checked'))
       {
          $('#lbl1').html('checked');
       }
       else
       {
          $('#lbl1').html('pls check ');
      }
})  });

answered Jan 19, 2015 at 15:48

Ankita.P

4421 gold badge8 silver badges18 bronze badges

Comments

Bhojendra Rauniyar · Accepted Answer · 2015-01-19 15:51:45Z

0

Wrap your code inside ready handler, and you can use html to append text and line breaks:

$(function(){
if($('#chkbox1').is(':checked')) {
 $('#lbl1').html("<br />Checked is true!");//use <br /> instead of \n
}else {
  $('#lbl1').html("<br />Checked is false!");
}
});

If you want it when clicked then use the conditional code inside change event like below:

$(function(){
$('#chkbox1').on('change',function(){
  if($(this).is(':checked')) {
    $('#lbl1').html("<br />Checked is true!");//use <br /> instead of \n
  }else {
    $('#lbl1').html("<br />Checked is false!");
  }
});
});

edited Jan 19, 2015 at 15:51

answered Jan 19, 2015 at 15:36

Bhojendra Rauniyar

86k36 gold badges179 silver badges240 bronze badges

1 Comment

Roko C. Buljan Over a year ago

\n is useless. It's just an escape

Roko C. Buljan · Accepted Answer · 2015-01-19 15:58:52Z

0

All you need: jsBin demo

$("#chkbox1").change(function(){
  $('#lbl1').text("Checked is "+ this.checked +"!");
});

answered Jan 19, 2015 at 15:58

Roko C. Buljan

209k41 gold badges334 silver badges346 bronze badges

Comments

VENKATESH KARNI · Accepted Answer · 2022-11-08 12:53:41Z

Try this

$(document).ready(function()
{
 $('input[type="checkbox"]').click(function() {
    var arr =[];
    $('input[type="checkbox"]:checked').each(function() {
      arr.push($(this).parent('p').text()+'\n');
    });
    var array = arr.toString().split(',')
    $("#text").val(array.join(""));
  });
});

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

<p>Append text when checkbox is checked</p>
<textarea rows="4" id="text" style="width: 100%">
</textarea>


<div id="checkboxes">
  <p><input type="checkbox" ><span>&nbsp;&nbsp; Item 1</span></p>
  <p><input type="checkbox" ><span>&nbsp;&nbsp; Item 2</span></p>
  <p><input type="checkbox" ><span>&nbsp;&nbsp; Item 3</span></p>
  <p><input type="checkbox" ><span>&nbsp;&nbsp; Item 4</span></p>
  <p><input type="checkbox" ><span>&nbsp;&nbsp; Item 5</span></p>
</div>

Collectives™ on Stack Overflow

append text when checkbox is checked

6 Answers 6

2 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Related