Hello
Making radio buttons look like buttons and getting radio and label value
if getting label value then please replace this css
.donate-now input[type="radio"] {
opacity:0.01;
z-index:100;
height:100%;
width:100%;
}
to
.donate-now input[type="radio"] {
opacity:0.01;
z-index:100;
}
<script>
$(document).ready(function(e) {
// Get Value Using Label
$('.hour').click(function(){
//alert('hi');
var lable_value = $(this).attr('month');
alert(lable_value);
});
//Get Value using Radio Button
$('input[name="hours"]:radio').click(function(){
radio_value = $(this).val();
alert(radio_value);
});
});
</script>
<ul class="donate-now">
<li>
<input type="radio" name="hours" value="1" >
<label class='hour' for="hour" month='hour'>hour</label>
</li>
<li>
<input type="radio" name="hours" value="4" >
<label class='hour' for="4hour" month='4hour'>4hour</label>
</li>
<li>
<input type="radio" name="hours" value="8" >
<label class='hour' for="8hour" month='8hour'>8hour</label>
</li>
<li>
<input type="radio" name="hours" value="24" >
<label class='hour' for="24hour" month='3days'>24hour</label>
</li>
<li>
<input type="radio" name="hours" value="3" >
<label class='hour' for="3days" month='3days'>3days</label>
</li>
<li>
<input type="radio" name="hours" value="all" >
<label class='hour' for="all" month='all'>all</label>
</li>
</ul>
<style>
.donate-now {
list-style-type:none;
margin:25px 0 0 0;
padding:0;
}
.donate-now li {
float:left;
margin:0 5px 0 0;
width:100px;
height:40px;
position:relative;
}
.donate-now label, .donate-now input {
display:block;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.donate-now input[type="radio"] {
opacity:0.01;
z-index:100;
height:100%;
width:100%;
}
.donate-now input[type="radio"]:checked + label,
.Checked + label {
background:yellow;
}
.donate-now label {
padding:5px;
border:1px solid #CCC;
cursor:pointer;
z-index:90;
}
.donate-now label:hover {
background:#DDD;
}
</style>
