Question

我有一个带按钮的代码。单击按钮时，将显示一个模态。在模态上，有多个复选框。选中其中一个复选框时，应打印该复选框的值。 但我想打印单击的复选框文本。

这是我的代码

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

替换此行

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

用它：

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

Answer 2

您可以在复选框上使用数据属性为您提供要显示的正确文字。

检查我的分叉小提琴：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 />

您的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 />");
}

我还更新了你的代码，不需要.each，使它更清洁。

如何使用javascript / jQuery中的弹出窗口回显复选框文本

2 个答案: