选中复选框时附加文本

Question

我在选中复选框后尝试将文本附加到标签时遇到问题。当我提交表单时，文本将发送到用户使用 Mandrill 输入的电子邮件地址。

我面临的问题是，即使我选中了复选框，我总是得到错误的值。我已经查看了 "Check checkbox checked property"，但 none 的解决方案适用于我的情况。我有以下 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>

如有任何帮助，我们将不胜感激

谢谢。

Answer 1

将您的代码包装在准备好的处理程序中，您可以使用 html 附加文本和换行符：

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

如果您希望在单击时使用它，请使用更改事件中的条件代码，如下所示：

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

Answer 2

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

试试这个，你的问题就解决了！

Answer 3

这样的事情怎么样？事件在复选框的哪个位置？

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

Answer 4

您需要先使用on click of check box然后检查是否被选中。下面是代码或者你可以参考 this js fiddle

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

Answer 5

所有你需要的：jsBin demo

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

选中复选框时附加文本

append text when checkbox is checked

html

checkbox

jquery