CODEWITHSUNDEEP
jqueryhtmlcheckbox
brasay
brasay

Reputation: 135

append text when checkbox is checked

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.

Upvotes: 0

Views: 4369

Answers (6)

VENKATESH KARNI
VENKATESH KARNI

Reputation: 66

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>

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

All you need: jsBin demo

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

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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

Upvotes: 0

Ankita.P
Ankita.P

Reputation: 442

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

Upvotes: 0

Master Yoda
Master Yoda

Reputation: 4402

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

Upvotes: 2

Akmal Arzhang
Akmal Arzhang

Reputation: 122

$('#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!

Upvotes: 0

Related Questions