引導標籤中的複選框不起作用

我試圖按照此tutorial將複選框顯示爲我的角度應用程序的按鈕，但某些內容對我來說不起作用，複選框值不會更改，並且不會調用onclick函數：引導標籤中的複選框不起作用

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="btn-group" data-toggle="buttons"> 
 
     <label class="btn btn-primary"> 
 
      <input type="checkbox" onclick="alert('is not shown')"> Click me <!-- Here --> 
 
     </label> 
 
    </div> 
 
</body> 
 
</html>

但如果我刪除了boostrap.js腳本（或class="btn btn-primary"）工作原理：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="btn-group" data-toggle="buttons"> 
 
     <label class="btn btn-primary"> 
 
      <input type="checkbox" onclick="alert('is shown !')"> Click me 
 
     </label> 
 
    </div> 
 
</body> 
 
</html>

如何使這個工作不去除bootstrap.js腳本？

來源

2017-04-13 ZwoRmi

我建議綁定該按鈕不通過的onchange /的onclick瀏覽器通過JS調用，但卻,,你可以通過該按鈕上的類/ ID使用定位？ –

我明白了..很酷！ –

添加自定義CSS的輸入

.btn-group input[type=checkbox]{ 
    clip: initial !important; 
    cursor: pointer; 
    height: 29px; 
    left: 0; 
    opacity: 0; 
    pointer-events: initial !important; 
    top: 0; 
    width: 100%; 
}

https://jsfiddle.net/xt3b88z2/

來源

2017-04-13 12:41:48

爲什麼這個CSS可以解決這個問題？ – ZwoRmi

指針事件無一bootstrap.css –

我每天都會學到新的東西.. cool –

只需使用onchange。複選框onchange應該比onclick更有意義。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="btn-group" data-toggle="buttons"> 
 
    <label class="btn btn-primary"> 
 
     <input type="checkbox" onchange="alert($(this).is(':checked'))">Click me 
 
    </label> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-04-13 12:38:10 Pugazh

@ZwoRmi：您正在使用'val（）'，但您需要使用'（$（this）.is（「：checked」））;'。查看更新的答案！ – Pugazh

引導標籤中的複選框不起作用

回答

相關問題