1、業務功能:四個按鈕只能選中一個,且預設選擇水準4 先看代碼。 <div class="btn-group" data-toggle="buttons"> <label class="btn btn-info"> <input type="radio" class="level_select" n ...
1、業務功能:四個按鈕只能選中一個,且預設選擇水準4
先看代碼。
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-info">
<input type="radio" class="level_select" name="level_select" value="1">水準4(波/測)
</label>
<label class="btn btn-info">
<input type="radio" class="level_select" name="level_select" value="2">水準3(波/測)
</label>
<label class="btn btn-info">
<input type="radio" class="level_select" name="level_select" value="3">水準2(波/測)
</label>
<label class="btn btn-info">
<input type="radio" class="level_select" name="level_select" value="4">水準1(波/測)
</label>
</div>
這是查看了bootstrap的資料做的四個按鈕的按鈕組。
業務需求:預設選中水準4,查找bootstrap資料並沒有找到合適的解決辦法,後來在一篇博客中找到一個方法(實在抱歉,忘記博客的地址了= = )
在代碼中加了active,代碼如下:
<label class="btn btn-info active">
<input type="radio" class="level_select" checked name="level_select" value="1">水準4(波/測)
</label>
這樣就實現了單選及預設選擇水準4的頁面效果。
2、關於取值。
我知道兩種取值辦法
(1)、var level_select= $("radio:checked").val();
這種取值方法是可以取值的,但是我的頁面中有很多這種單選radio,為了避免歧義,所以我選擇了下麵這種取值。
(2)、var level_select= $(".level_select:checked").val();
這就是為什麼input裡面我加了class的原因,目前效果看來不錯。