Wonder Designers

Html Css Design technology

Simple Custom Radio Button & Check Box Plugin

  • Home
  • jQuery
  • Simple Custom Radio Button & Check Box Plugin

We’ve various jQuery Plugin on the various websites, but these have a css file one or most of time two js files and a lots of changes in the HTML code. Here we’re going to introduces a short and sweet Plugin for custom Radio Buttons and Check Box.
Here we simply use a class with Radio Buttons and Check Box and display:none the Radio Buttons and Check Box by jQuery and append a span or any one tag which you want with a class by which we will apply css on the new HTML tag.For see demo Click Here:

HTML Code:


<div class="div">
 <h2>Check Box</h2>
 <input type="checkbox" class="mycheck" />
 <label>I am Check </label>
 <input type="checkbox" class="mycheck" />
 <label>I am Check </label>
</div>
<div class="div">
 <h2>Radio Button</h2>
 <input type="radio" class="radio" name="a" />
 <label>I am Radio</label>
 <input type="radio" class="radio" name="a" />
 <label>I am Radio </label>
</div>
<div class="div">
 <h2>Radio Button</h2>
 <input type="radio" class="radio" name="a" />
 <label>I am Radio</label>
 <input type="radio" class="radio" name="a" />
 <label>I am Radio </label>
 <input type="radio" class="radio" name="a" />
 <label>I am Radio </label>
 <input type="radio" class="radio" name="a" />
 <label>I am Radio </label>
</div>

JS Code:



$(document).ready(function() {

$('input.mycheck').after('<div class="checkbox1"> </div>');

$('input.mycheck').css("display", "none");

$('.checkbox1').click(function() {

$(this).toggleClass('check');

if ($(this).hasClass('check')) {

$(this).prev('input.mycheck').attr("checked", "checked");

} else {

$(this).prev('input.mycheck').removeAttr('checked');

}

});
/*
radio buttons
*/

$('input.radio').after('<div class="myradio"> </div>');

$('input.radio').css("display", "none");

$('.myradio').click(function() {
$(this).siblings('.myradio').removeClass('check');
$(this).siblings('.radio').removeAttr('checked');
$(this).addClass('check');
$(this).prev('input.radio').attr("checked", "checked");
});

});

CSS Code:


* {
margin: 0px;
padding: 0px;
}
.div {
width: 100px;
margin: 50px auto;
}
label {
font-size: 15px;
}
.checkbox1 {
width: 12px;
height: 12px;
border: 1px solid #dddddd;
background-color: #fff;
display: inline-block;
margin-right: 5px;
cursor: pointer;
vertical-align: middle;
}
.checkbox1:hover, .checkbox1:focus {
box-shadow: 0 0 2px #8BC242 inset;
}
.checkbox1.check {
background: url(tick.png) center center no-repeat;
}
.myradio {
width: 12px;
height: 12px;
border: 1px solid #dddddd;
background-color: #fff;
display: inline-block;
margin-right: 5px;
cursor: pointer;
vertical-align: middle;
}
.myradio.check {
background: url(tick.png) center center no-repeat;
}

About

View all posts by

POST A COMMENT