Question

我正在使用bootstrap btngroup来选择一个值..我可以显示所选的值吗？这是我的代码。

    <div class="input-group">
        <div id="radioBtn" class="btn-group">
            <a class="btn btn-primary btn-sm active" data-toggle="fun" data-  title="Y">YES</a>
            <a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="X">I don't know</a>
            <a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="N">NO</a>
        </div>
        <input type="hidden" name="fun" id="fun">
    </div>

和JS

   $('#radioBtn a').on('click', function(){
      var sel = $(this).data('title');
      var tog = $(this).data('toggle');
      $('#'+tog).prop('value', sel);

     $('a[data-toggle="'+tog+'"]').not('[data-  title="'+sel+'"]').removeClass('active').addClass('notActive');
     $('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
  })

Answer 1

整理您的代码 - 删除HTML和JS中data- title属性中的空格，因为这些空间会导致其中断。
在HTML中的某个位置添加<div id="display"></div>，并按照自己喜欢的方式设置样式。
将此行添加到您的JS点击处理程序：$('#display').html(sel);

Here's a demo

如果您希望结果是单选按钮的文本而不是值，请在步骤3中使用$('#display').html($(this).html());。

完成。

Answer 2

不确定这是不是您的意思，但是为了从按钮组中的单击按钮获取值（或文本），我使用了例如......

<强> HTML

  <div id="aBtnGroup" class="btn-group">
    <button type="button" value="L" class="btn btn-default">Left</button>
    <button type="button" value="M" class="btn btn-default">Middle</button>
    <button type="button" value="R" class="btn btn-default">Right</button>
  </div>
  <p>
  <div>Selected Val:  <span id="selectedVal"></span></div>

<强> JS

$(document).ready(function() {

  // Get click event, assign button to var, and get values from that var
  $('#aBtnGroup button').on('click', function() {
    var thisBtn = $(this);

    thisBtn.addClass('active').siblings().removeClass('active');
    var btnText = thisBtn.text();
    var btnValue = thisBtn.val();
    console.log(btnText + ' - ' + btnValue);

    $('#selectedVal').text(btnValue);
  });

  // You can use this to set default value upon document load
  // It will fire above click event which will do the updates for you
  $('#aBtnGroup button[value="M"]').click();
});

CONSOLE OUTPUT

Left - L
Middle - M
Right - R

希望这有帮助

Plunker此处

在JavaScript中显示所选值

2 个答案: