Wie echo Kontrollkästchen Text mit Popup in Javascript/jQuery

Question

Ich habe einen Code mit einer Schaltfläche. Wenn Sie auf klicken, wird ein Modal angezeigt. Auf Modal gibt es mehrere Kontrollkästchen. Wenn eines der Kontrollkästchen aktiviert ist, sollte ein Wert dieses Kontrollkästchens gedruckt werden. Aber ich möchte Text von angeklickt Checkbox drucken.

[Please Check This Fiddle]

Hier ist mein Code

$(document) 
    .ready(function() { 
    $(".various").fancybox({ 
     maxWidth: 800, 
     maxHeight: 600, 
     fitToView: false, 
     width: '70%', 
     height: '70%', 
     autoSize: false, 
     closeClick: false, 
     openEffect: 'none', 
     closeEffect: 'none' 
    }); 

    $('.button1').click(function(e) { 
     e.preventDefault(); 
     $('.various').click(); 
    }); 

    }) 
    .on('change', '[name=test-link]', function() { 
    $('#print-values').empty(); 
    $('#print-values').append("<span>You've checked:</span><br />"); 
    $('[name=test-link]').each(function() { 
     if ($(this).prop("checked")) { 
     var v = $(this).val(); 
     $('#print-values').append(v + "<br />"); 
     } 
    }); 
    }); 




<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script> 

<a class="various" href="#form1" style='display: none;'></a> 
<input class='button1' type="button" value="Link More Opinion" /> 
<div id='print-values'></div> 
<div style='display: none;'> 
    <form id='form1'> 
    <input type='checkbox' name='test-link' value="1" /> One 

    <br /> 
    <input type='checkbox' name='test-link' value="2" />Two 
    <br /> 
    <input type='checkbox' name='test-link' value="3" /> Three 
    <br /> 
    </form> 
</div> 

Answer 1

Ersetzen Sie diese Zeile

var v = $(this).val(); 

mit ihm:

var v = $(this)[0].nextSibling.nodeValue; 

Answer 2

Sie könnten eine Daten attribu verwenden Klicken Sie auf Ihre Kontrollkästchen, um den richtigen Text anzuzeigen.

meine gegabelt Geige Check: https://jsfiddle.net/eLozh9zd/1/

<input type='checkbox' name='test-link' value="1" data-text="One"/> One 
<br /> 
<input type='checkbox' name='test-link' value="2" data-text="Two" /> Two 
<br /> 
<input type='checkbox' name='test-link' value="3" data-text="Three"/> Three   
<br /> 

Und eine Änderung in Ihrem Javascript:

// If there is a checked checkbox 
if($('[name=test-link]:checked').length > 0){ 
    $('#print-values').empty(); 
    $('#print-values').append("<span>You've checked:</span><br />"); 

    var v = $('[name=test-link]:checked').data('text'); 
    $('#print-values').append(v + "<br />"); 
} 

ich Ihren Code auch keine .each aktualisiert benötigen, ist es ein bisschen sauberer zu machen.