[英]Bootstrap uncheck checkbox and style
我有3個按鈕/復選框,如果單擊選中的任何按鈕,如果我單擊當前的按鈕,如何使所有其他按鈕取消選中。
https://jsfiddle.net/DTcHh/31573/
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-lg no-border">
<span id="btnPencil" class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<input type="checkbox" autocomplete="off">
</label>
<label class="btn btn-default btn-lg no-border">
<span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
<input type="checkbox" autocomplete="off">
</label>
<label class="btn btn-default btn-lg no-border">
<span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
<input type="checkbox" autocomplete="off">
</label>
</div>
btnp = document.getElementById(btnPencil)
btnp.addEventListener('change', function() {
// 1. check current button / checkbox
// 2. uncheck other buttons / checkbox
// bootstrap uncheck / check style ?
});
為此,您應該真正使用單選按鈕,而不是復選框,並設置它們的樣式為復選框(如果您更喜歡這種外觀)。 所以代替
<input type="checkbox" autocomplete="off">
只需使用
<input type="radio" autocomplete="off" name="X">
並確保所有無線電具有相同的名稱屬性。
/* Latest compiled and minified JavaScript included as External Resource */
/* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default btn-lg no-border"> <span id="btnPencil" class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <input id="checkboxPencil" type="radio" autocomplete="off" name="menu"> </label> <label class="btn btn-default btn-lg no-border"> <span id="btnSquare" class="glyphicon glyphicon-th-large" aria-hidden="true"></span> <input id="checkboxSquare" type="radio" autocomplete="off" name="menu"> </label> <label class="btn btn-default btn-lg no-border"> <span id="btnSquare" class="glyphicon glyphicon-th-large" aria-hidden="true"></span> <input id="checkboxSquare2" type="radio" autocomplete="off" name="menu"> </label> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.