选中复选框时附加文本答案

【问题标题】：append text when checkbox is checked选中复选框时附加文本
【发布时间】：2015-01-19 15:32:42
【问题描述】：

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

我面临的问题是，即使我选中了复选框，我也总是得到错误的值。我已经查看了“检查复选框选中的属性”，但没有一个解决方案适用于我的情况。我有以下 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>

任何帮助将不胜感激

谢谢。

【问题讨论】：

你的意思是排除结束表单标签吗？
我好像忘了把它包含在我的帖子中，我的错。在我的代码中包含它，所以这不是问题。
没关系 :) 我一直都这样做。我认为您需要发生一个事件才能有效地工作。在下面查看我的答案。

标签： jquery html checkbox

【解决方案1】：

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

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

【讨论】：

我试过了，效果很好，非常感谢。我一直在寻找几个小时的答案
不客气。如果可以的话，我会使用类来实现此功能，以防您需要在多个地方使用它。例如，如果您有多个复选框，或者您在其他页面上使用该功能。祝你好运

【解决方案2】：

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

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

【讨论】：

通过这样做，您实际上是一遍又一遍地附加文本。可能想向 OP 澄清这是他们正在寻找的东西。

【解决方案3】：

您需要先使用单击复选框，然后检查是否已选中。下面是代码或者你可以参考thisjs fiddle

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

【讨论】：

【解决方案4】：

将您的代码包装在就绪处理程序中，您可以使用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!");
  }
});
});

【讨论】：

\n 没用。这只是一种逃避

【解决方案5】：

您所需要的一切：jsBin demo

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

【讨论】：