如果满足条件，则将文本添加到文本答案

【问题标题】：Adding Text to Text if Condition is met如果满足条件，则将文本添加到文本
【发布时间】：2016-11-06 01:15:59
【问题描述】：

如果满足条件，我如何在 jQuery 或纯 Javascript 中添加文本？

例如：

<input type="checkbox" id="foo">                
<label for="foo">Foo Text</label>                
<input type="checkbox" id="bar">                
<label for="bar">Bar Text</label>            
<p class="success" style="display: none;">Thank you for </p>        
<button type="submit" id="submit-form" class="btn btn-success pull-left">SUBSCRIBE</button>

我不需要在单击提交后放置“条形文本”或“脚文本”的逻辑，具体取决于选中的复选框。

我知道我必须使用.is(:checked)，但我不知道如何在静态的“谢谢”文本之后动态放置文本。

另外，如果可能的话，我想要一个 jQuery 和 Javascript 解决方案，仅用于学习目的。

谢谢。

【问题讨论】：

请告诉我们你已经尝试过什么
我做到了.. 不幸的是
““Bar Text”或“Foot Text”'应该放在哪里？
好的，当您尝试自己编写此内容时，您遇到了什么困难？您不理解或不理解哪些部分或部分？
我们知道您想要什么；我要问的是“你在哪里卡住了？为什么你没有写比 HTML 更多的东西？”另外，考虑到你正在使用复选框（其中两个，或者都不是，可以检查）如果它们都被检查会发生什么？如果两者都没有选中会发生什么？

标签： javascript jquery html css checkbox

【解决方案1】：

你在寻找这样的东西吗？

$("#submit-form").on("click",function(){
  $(".success:eq(0)").text("Thank you for");
  $("input[type=checkbox]:checked").each(function(){
    if($(this).is(":checked")){
      $(".success:eq(0)").show().append(" " +        $(this).next("label").text());
      }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="foo">                
<label for="foo">Foo Text</label>                
<input type="checkbox" id="bar">                
<label for="bar">Bar Text</label>            
<p class="success" style="display: none;">Thank you for </p>        
<button type="submit" id="submit-form" class="btn btn-success pull-left">SUBSCRIBE</button>

【讨论】：

【解决方案2】：

您可以使用map() 执行此操作，以返回带有标签文本的数组，该数组的标签文本为检查输入的next，并使用join() 将该数组转换为文本。

$('input').change(function() {
  var text = $('input').map(function() {
    if ($(this).is(':checked')) return $(this).next('label').text()
  }).get().join(', ');

  (text != '') ? $('p.success').text('Thank you for ' + text).show(): $('p.success').hide()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="foo">
<label for="foo">Foo Text</label>
<input type="checkbox" id="bar">
<label for="bar">Bar Text</label>
<p class="success" style="display: none;">Thank you for</p>
<button type="submit" id="submit-form" class="btn btn-success pull-left">SUBSCRIBE</button>

【讨论】：

【解决方案3】：

要获取您需要的文本：

$("#data").find("input:checked").next("label").text();
     ^                ^                 ^        ^----------|
Where to look    What to find     Where to navigate    What to get

所以基本上，在#data div 中搜索选中的复选框并抓住它们旁边的标签文本。

阅读：

$(function() {
  var prevText = $(".success").text();
  $("#submit-form").click(function() {
    var text = $("#data").find("input:checked").next("label").text();
    $(".success").text(prevText + " " + text).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="data">
  <input type="checkbox" id="foo">
  <label for="foo"> Foo Text</label>
  <input type="checkbox" id="bar">
  <label for="bar"> Bar Text</label>
</div>
<p class="success" style="display: none;">Thank you for</p>
<button type="submit" id="submit-form" class="btn btn-success pull-left">SUBSCRIBE</button>

【讨论】：

【解决方案4】：

下面是一个开始的 jQuery 示例。

$(function() {
  $('input[type="checkbox"]').change(function() {
    var text = $(this).next('label').text();
    $('.success').text("Thank you for " + text).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="foo">
<label for="foo">Foo Text</label>
<input type="checkbox" id="bar">
<label for="bar">Bar Text</label>
<p class="success" style="display: none;"></p>
<br/>
<button type="submit" id="submit-form" class="btn btn-success pull-left">SUBSCRIBE</button>

【讨论】：

【解决方案5】：

<div class="container">
 <input type="checkbox" id="foo" class="chkBox">                
 <label for="foo">Foo Text</label>                
 <input type="checkbox" id="bar" class="chkBox">                
 <label for="bar">Bar Text</label>
</div>
<p class="success" style="display: none;">Thank you for </p>        
<button type="submit" id="submit-form" class="btn btn-success pull-left">SUBSCRIBE</button>

jQuery

var checked = $('div.container').find('input:checked').attr("id");
var textNeeded = $("[for=" + checked + "]").text();
$('.success').text("Thank you for " + textNeeded).show();

【讨论】：