"Bootstrap Checkboxes/Radios"
Bootstrap 3.2.0 Snippet by i-heart-php

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="container">
<h2>Checkboxes</h2>
<form role="form">
<div class="row">
<div class="col-md-4">
<fieldset>
<legend>
Basic
</legend>
<p>
Supports bootstrap brand colors: <code>.checkbox-primary</code>, <code>.checkbox-info</code> etc.
</p>
<div class="checkbox">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">
Default
</label>
</div>
<div class="checkbox checkbox-primary">
<input id="checkbox2" type="checkbox" checked="">
<label for="checkbox2">
Primary
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">
Success
</label>
</div>
<div class="checkbox checkbox-info">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.checkbox {
padding-left: 20px; }
.checkbox label {
display: inline-block;
position: relative;
padding-left: 5px; }
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
.checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555; }
.checkbox input[type="checkbox"] {
opacity: 0; }
.checkbox input[type="checkbox"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Black Dashboard Pro
Animated radios & checkboxes (noJS)
Simple CSS Custom CheckBoxes and Radios
Fancy Bootstrap Checkboxes

Questions / Comments:

You dont have to use the HTML helper because as zholinho said, HTML helper create an extra input and that make the css do not work. Just delete your HTML and put a manual input, ypu can set the values as follow:

<div class="checkbox checkbox-primary pull-right">

<input type="checkbox" name="NameOfAttribute" checked="@Model.AttributeBoolean" id="NameOfAttribute" value="@Model.AttributeBoolean.ToString().ToLower()" />

<label for="NameOfAttribute">Label Text</label>

</div>

To get if the element it´s cheked just use:

var chk = $('input[name="NameOfAttribute"]:checked').length > 0

This example was to detect a false or true, if you need the actual values use the val() function.

Hope this could help to everyone with the same problema.

dgarzam (1) - 6 years ago - Reply 1

It doesn't work when i use it in ASP.NET dynamic checkboxes or radiobuttons, is there any solution?

Mahnoor Khan () - 7 years ago - Reply -1

Does it support rtl? When switching to rtl locale, the labels are on the right side of the check box instead of to the left.
Any suggestions?

shal () - 7 years ago - Reply -1

does anyone knew how to do this ???

Marco Garcia () - 7 years ago - Reply 0

It doesn't work with razor CheckBoxFor?
Any suggestions

Prashant Soni () - 7 years ago - Reply 0

What version of IE are they compatible with?

Steen Alcor () - 8 years ago - Reply 0

For ASP.NET MVC, see added rules here(https://gist.github.com/jmv....

JMV Trinidad () - 8 years ago - Reply 0

How to remove radio button border on focus

Barkat () - 8 years ago - Reply 0

remove the tokens outline and outline-offset on css file

Rodolfo Souza () - 7 years ago - Reply 0

It doesn't work with razor CheckBoxFor, probably because it generates one hidden input between input and label. Does anyone have some quick solution for this?

zholinho () - 9 years ago - Reply 0

I solved it, i just added one more input between them.

zholinho () - 9 years ago - Reply 0

I have a same issue. can You help me?

My rozor
<div class="checkbox checkbox-primary">
@Html.CheckBox(itemQ.QuestionID.ToString(), new { value = itemA.AnswerID, @id = @idControl })<label for="@idControl">@Html.DisplayFor(modelItem => itemA.AnswerText)</label>
</div>

Raien () - 9 years ago - Reply 0