在JavaScript中显示选中的值

Displaying the selected value in JavaScript

本文关键字：显示 JavaScript      更新时间：2023-09-26

我使用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');
  })
  1. 整理你的代码-删除空格在你的data- title属性，在HTML和JS，因为这些是导致它中断。
  2. 在你的HTML的某个地方添加一个<div id="display"></div>，并按照你喜欢的方式设置它。
  3. 将这行添加到你的JS点击处理程序:$('#display').html(sel);

这是一个演示。

如果您希望结果是单选按钮的文本而不是值，请在步骤3中使用$('#display').html($(this).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();
});
控制台输出

Left - L
Middle - M
Right - R

希望有帮助

恰好在这里

相关文章：