Bootstrap取消選中複選框和樣式

我有3個按鈕/複選框，如果我點擊任何它被檢查，我如何使所有其他按鈕取消選中，如果我點擊當前的。Bootstrap取消選中複選框和樣式

<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 ? 
});

來源

2017-04-06 Micheasl

爲什麼不使用'無線電buttons'呢？ – Swellar

可能重複的[設置「檢查」的複選框與jQuery？]（http://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery） – Micheasl

你真的應該使用單選按鈕對於這一點，不復選框和他們的風格看起來像複選框（如果你喜歡的樣子）。因此，而不是

<input type="checkbox" autocomplete="off">

只需使用

<input type="radio" autocomplete="off" name="X">

，並確保所有無線電設備具有相同的名稱屬性。

來源

2017-04-06 10:12:01

謝謝不知何故忘記 – Micheasl

你沒有添加'name'屬性。正如答案中所說，爲了使其工作，您應該將'name'屬性添加到所有收音機，並且名稱應該相同。因此，只需將name =「foo」或name =「複選框樣式」或其他內容添加到所有收音機。如果答案有幫助，請將其標記爲這樣。 –

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

來源

2017-04-06 10:19:57

Bootstrap取消選中複選框和樣式

回答

相關問題