2015-06-30 27 views
0

使用引導程序的決定,我有一組按鈕:使基於所檢查按鈕

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

,我要檢查用戶是否檢查yes或no。這是我如何檢查一個js文件:

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

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


}); 

它用於改變bootstrap之前工作,但現在它不工作。

添加代碼提交:

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

哪裏#submit? – Anshul

+0

添加代碼提交 –

+0

它在服務器上嗎?你能提供鏈接嗎?它會更好地調試 – divy3993

回答

1

這不是一個input - 標籤了,所以它不匹配。

最簡單的就是給它一個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(); 
+0

不起作用。給它一個ID並嘗試兩種方式。 –

+0

好的,我想你正在使用JavaScript提供的bootstrap組件。您是否閱讀過該組件的文檔? – wvdz

+0

是的。並且我認爲var CusYes = $(「input:radio [name = CusYes]:checked」)。val();或var cusyes = $(「#cusyes」)。val();應該管用。但我甚至無法讓它給我價值。我檢查並提交按鈕在它自己的工作。 –

0

您可能需要使用Single toggle這一點。

這是你的按鈕現在:

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

一個切換按鈕連有一個active類。所以,在表單提交所有你必須要做的活動之一是$('button.active')

0

在加入引導期間,你的按鈕不是現在單選按鈕。 你可以就我所知道的是什麼在這裏,點擊

<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 !'); 
    } 
}); 
0

,這會爲你工作。

在引導爲data-toggle="buttons-checkbox"時,裏面的按鈕,點擊它會active類添加到它(它實際上將切換上點擊多次),但如果引導程序的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>