Hinzufügen von Text zu Text, wenn die Bedingung erfüllt ist

Question

Wie kann ich in jQuery oder plain Javascript Text hinzufügen, wenn Bedingung erfüllt ist?

Zum Beispiel:

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

Nicht ich brauche eine Logik, die einen „Bar Text“ oder „Fuß Text“ setzen wird je nachdem, welches Kontrollkästchen aktiviert ist, nachdem die geklickt einreichen.

Ich weiß, ich muss .is(:checked) verwenden, aber ich weiß nicht, wie Sie einen Text dynamisch nach dem statischen "Danke" Text platzieren.

Auch möchte ich eine jQuery und Javascript-Lösung, wenn möglich, nur für Lernzwecke.

Danke.

Answer 1

Um den Text, den Sie diese benötigen zu holen:

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

Also im Grunde Suche in #data div für aufgegebenes Kontrollkästchen und greift den Text des Etiketts nächsten zu ihnen.

lesen:

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

Unten ist ein jQuery-Beispiel, um loszulegen.

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

Suchen Sie dieser Suchbegriffe?

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

Sie können dies tun, mit map() Array mit dem Text des Etiketts zurückzuversetzen next der Eingabe, die und join() geprüft wird, verwendet das Array zu transformieren, um Text.

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