Question

如果满足条件，我如何在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>

我不需要一个可以放置＆＃34; Bar Text＆＃34;或＆＃34;脚文＆＃34;取决于选中哪个复选框，单击提交后。

我知道我必须使用.is(:checked)，但我不知道如何在静态之后动态放置文本＆＃34;谢谢你＆＃34;文本。

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

感谢。

Answer 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>

Answer 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>

Answer 3

要获取文本，您需要：

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

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

阅读：

https://api.jquery.com/find/
https://api.jquery.com/next/
https://api.jquery.com/text/

$(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>

Answer 4

下面是一个jQuery示例入门。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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();

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

5 个答案: