admin管理员组文章数量:1327843
I am making checkboxes/radio/toggle groups for Bootstrap, but I failed with checkboxes - can you help me to make them work?
HTML:
<form id="edit-accounts" class="form-horizontal" method="post">
<fieldset>
<div class="control-group">
<label class="control-label">Radio Group:</label>
<div class="controls btn-group" data-toggle="buttons-radio" data-toggle-name="radio_group">
<button type="button" value="1" class="btn" data-toggle="button">first</button>
<button type="button" value="2" class="btn" data-toggle="button">second</button>
<button type="button" value="3" class="btn" data-toggle="button">third</button>
</div>
<input type="hidden" name="radio_group" value="1" />
</div>
<div class="control-group">
<label class="control-label">Checkbox Group:</label>
<div class="controls btn-group" data-toggle="buttons-checkbox" data-toggle-name="checkbox_group">
<button type="button" value="1" class="btn" data-toggle="button">js</button>
<button type="button" value="2" class="btn" data-toggle="button">fiddle</button>
<button type="button" value="3" class="btn" data-toggle="button">alpha</button>
</div>
<input type="hidden" name="checkbox_group" value="1" />
</div>
<div class="control-group">
<label class="control-label">Toggle:</label>
<div class="controls btn-group" data-toggle="button" data-toggle-name="button_group">
<button type="button" value="1" class="btn" data-toggle="button">on/off</button>
</div>
<input type="hidden" name="button_group" value="1" />
</div>
</fieldset>
</form>
JavaScript:
$(function () {
$('div.btn-group[data-toggle-name=*]').each(function () {
var form = $(this).parents('form').eq(0);
var name = $(this).attr('data-toggle-name');
var hidden = $('input[name="' + name + '"]', form);
var type = $(this).attr('data-toggle');
var check = [];
$('button', $(this)).each(function () {
$(this).live('click', function () {
if($(this).val() == hidden.val()) {
switch(type) {
case 'button':
$(this).removeClass('active');
hidden.val(0);
break;
case 'buttons-checkbox':
$(this).removeClass('active');
break;
default:
hidden.val($(this).val());
}
} else {
switch(type) {
case 'button':
$(this).addClass('active');
hidden.val(1);
break;
case 'buttons-checkbox':
$(this).addClass('active');
break;
default:
hidden.val($(this).val());
}
}
});
if($(this).val() == hidden.val()) $(this).addClass('active');
});
});
});
working prototype
I am making checkboxes/radio/toggle groups for Bootstrap, but I failed with checkboxes - can you help me to make them work?
HTML:
<form id="edit-accounts" class="form-horizontal" method="post">
<fieldset>
<div class="control-group">
<label class="control-label">Radio Group:</label>
<div class="controls btn-group" data-toggle="buttons-radio" data-toggle-name="radio_group">
<button type="button" value="1" class="btn" data-toggle="button">first</button>
<button type="button" value="2" class="btn" data-toggle="button">second</button>
<button type="button" value="3" class="btn" data-toggle="button">third</button>
</div>
<input type="hidden" name="radio_group" value="1" />
</div>
<div class="control-group">
<label class="control-label">Checkbox Group:</label>
<div class="controls btn-group" data-toggle="buttons-checkbox" data-toggle-name="checkbox_group">
<button type="button" value="1" class="btn" data-toggle="button">js</button>
<button type="button" value="2" class="btn" data-toggle="button">fiddle</button>
<button type="button" value="3" class="btn" data-toggle="button">alpha</button>
</div>
<input type="hidden" name="checkbox_group" value="1" />
</div>
<div class="control-group">
<label class="control-label">Toggle:</label>
<div class="controls btn-group" data-toggle="button" data-toggle-name="button_group">
<button type="button" value="1" class="btn" data-toggle="button">on/off</button>
</div>
<input type="hidden" name="button_group" value="1" />
</div>
</fieldset>
</form>
JavaScript:
$(function () {
$('div.btn-group[data-toggle-name=*]').each(function () {
var form = $(this).parents('form').eq(0);
var name = $(this).attr('data-toggle-name');
var hidden = $('input[name="' + name + '"]', form);
var type = $(this).attr('data-toggle');
var check = [];
$('button', $(this)).each(function () {
$(this).live('click', function () {
if($(this).val() == hidden.val()) {
switch(type) {
case 'button':
$(this).removeClass('active');
hidden.val(0);
break;
case 'buttons-checkbox':
$(this).removeClass('active');
break;
default:
hidden.val($(this).val());
}
} else {
switch(type) {
case 'button':
$(this).addClass('active');
hidden.val(1);
break;
case 'buttons-checkbox':
$(this).addClass('active');
break;
default:
hidden.val($(this).val());
}
}
});
if($(this).val() == hidden.val()) $(this).addClass('active');
});
});
});
working prototype
Share edited Jun 9, 2012 at 14:46 Colin Brock 21.6k9 gold badges49 silver badges62 bronze badges asked Jun 9, 2012 at 14:20 atomosatomos 291 gold badge1 silver badge6 bronze badges 1- 3 This is a rather poor description of a problem. – augustomen Commented Nov 5, 2012 at 17:12
3 Answers
Reset to default 3This is how i rewrote your code to make it work well with the check box group:
jQuery(function($) {
$('div.btn-group[data-toggle-name]').each(function(){
var group = $(this);
var form = group.parents('form').eq(0);
var name = $(this).attr('data-toggle-name');
var hidden = $('input[name="' + name + '"]', form);
var type = group.attr('data-toggle');
var check = (hidden.val() != '') ? hidden.val().split(',') : [];
$('button', group).each(function() {
var button = $(this);
button.live('click', function() {
switch(type) {
case 'buttons-checkbox':
if(check.indexOf(button.val()) == -1){
button.addClass('active');
check.push(button.val());
}else{
check.splice(check.indexOf(button.val()),1);
button.removeClass('active');
}
hidden.val(check.toString());
break;
case 'button':
if(button.val() == hidden.val()) {
button.removeClass('active');
hidden.val(0);
} else {
button.addClass('active');
hidden.val(1);
}
break;
default:
hidden.val(button.val());
break;
}
});
switch(type) {
case 'buttons-checkbox':
for (i=0;i<check.length;i++) {
if(button.val() == check[i]) {
button.addClass('active');
}
}
break;
default:
if(button.val() == hidden.val()) {
button.addClass('active');
}
break;
}
});
});
});
The HTML code seems valid. The issue es to your JS. I've ran your code through JSHint, an online linter for JS. It returned the following issues.
Line 2: $('div.btn-group[data-toggle-name=*]').each(function () {
Missing "use strict" statement.
Line 10: if($(this).val() == hidden.val()) {
Expected '===' and instead saw '=='.
Line 36: if($(this).val() == hidden.val()) $(this).addClass('active');
Expected '===' and instead saw '=='.
Line 36: if($(this).val() == hidden.val()) $(this).addClass('active');
Expected '{' and instead saw '$'.
Line 39: });
Unexpected ''.
Hope this helps and DFTBA. :)
Why don't you use bootstrap-button.js
http://twitter.github./bootstrap/javascript.html#buttons
本文标签: Twitter Bootstrap Checkbox JavaScriptStack Overflow
版权声明:本文标题:Twitter Bootstrap Checkbox JavaScript - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742220660a2435394.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论