根据选中的按钮做出决定答案

【问题标题】：Make decisions based on checked buttons根据选中的按钮做出决定
【发布时间】：2015-06-30 18:39:21
【问题描述】：

使用引导程序，我有一组按钮：

<div id="first" class="panel panel-primary panel-width">
    <div class="panel-heading">Yes/No Question</div>
    <div id="answer" class="panel-body">
    <div class="btn-group-sm" role="group" data-toggle="buttons-checkbox" aria-label="...">
    <button type="button" name="CusYes" class="btn btn-default">Yes</button>
    <button type="button" class="btn btn-default">No</button>
   </div>
</div>

我想检查用户是否选中了是或否。这就是我签入 js 文件的方式：

$(document).ready(function() {
$("#Submit").click(function() {
var CusYes = $("input:button[name=CusYes]:checked").val();

if(CusYes ==== "Yes") { alert ("it works!");}
  });


});

在更改为引导程序之前它曾经可以工作，但现在它不起作用。

添加了提交代码：

<button id="Submit" type="button" class="btn btn-success">
  <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> Submit !
  </button>

【问题讨论】：

添加了提交代码
它在服务器上吗？你能提供链接吗？我们最好调试一下
不，它不在服务器上。
@tyrell_c 查看答案，如果仍有任何问题，请随时提问。

标签： javascript html twitter-bootstrap button

【解决方案1】：

它不再是input-tag，所以它不匹配。

最简单的方法是给它一个 id 并使用它来检索值。

<button type="button" name="CusYes" id ="cusyes" class="btn btn-default">Yes</button>

var cusyes = $("#cusyes").val();

我想这也应该有效：

var CusYes = $("button:button[name=CusYes]:checked").val();

【讨论】：

好吧，我猜你正在使用 javascript 驱动的引导组件。您是否阅读了该组件的文档？
是的。我认为要么 var CusYes = $("input:radio[name=CusYes]:checked").val();或 var cusyes = $("#cusyes").val();应该管用。但我什至不能让它给我价值。我检查了一下，提交按钮可以自己使用。

【解决方案2】：

您可能想为此使用Single toggle。

现在这是您的按钮：

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

切换按钮附加了一个active 类。因此，在提交表单时，您只需 $('button.active')

【讨论】：

【解决方案3】：

在添加 bootstrap 期间，您的按钮现在不是单选按钮。你可以在这里做的是，点击

    <button type="button" name="CusYes" class="btn btn-default commonclass">Yes</button>
    <button type="button" class="btn btn-default commonclass">No</button>

$('.commonclass').off('click').on('click',function(){
   $('.commonclass').removeClass('active';)
   $(this).addClass('active');
});

$("#Submit").click(function(){
    // check for active class
    if($('.commonclass').find('.active').val() === 'yes'){
        alert('yes !');
    }
});

【讨论】：

【解决方案4】：

据我所知，这对你有用。

在 data-toggle="buttons-checkbox" 的 Bootstrap 中，当单击其中的按钮时，它会向其中添加 active 类（实际上会在多次单击时切换），但如果未正确插入 Bootstrap JavaScript，则可能会导致问题。

所以我希望你试试这个，它肯定会奏效。

$('#statusYes').click(function(){
$('#statusYes').toggleClass('active');
});

$('#statusNo').click(function(){
$('#statusNo').toggleClass('active');
});

$('button[id="Submit"]').click(function () {
    if($('#statusYes').hasClass("active"))
    {
        alert("Button with Yes is Active!");
    }
    if($('#statusNo').hasClass("active"))
    {
        alert("Button with No is Active!");
    }
    // Now if none are active
    if(!$('#statusYes').hasClass("active") && !$('#statusNo').hasClass("active"))
    {
        alert("None among Yes and No button is Active");
    }
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div id="first" class="panel panel-primary panel-width">
    <div class="panel-heading">Yes/No Question</div>
    <div id="answer" class="panel-body">
        <div class="btn-group-sm" role="group" data-toggle="buttons-checkbox" aria-label="...">
            <button type="button" id="statusYes" class="btn btn-default">Yes</button>
            <button type="button" id="statusNo" class="btn btn-default">No</button>
        </div>
    </div>
    <button id="Submit" type="button" class="btn btn-success"> <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> Submit !</button>

【讨论】：