如果條件滿足，將文本添加到文本

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> 

不是我需要將放置一個「欄文本」或取決於該複選框被選中「足文本」邏輯，之後點擊提交。

我知道我必須使用.is(:checked)但我不知道如何在靜態「謝謝」文本之後動態地放置文本。

此外，我想要一個jQuery和Javascript解決方案，如果可能的話，僅用於學習目的。

謝謝。

Answer 1

爲了獲取你需要這個文本：

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

因此，基本上，在#DATA DIV搜索選中的複選框並抓住 文本旁邊的標籤給他們。

閱讀：

1. https://api.jquery.com/find/
2. https://api.jquery.com/next/
3. 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 2

下面是一個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>

Answer 3

您正在尋找這樣的事情？

$("#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 4

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

Answer 5

你可以做到這一點與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>