Showing posts with label Making radio buttons look like buttons and getting radio and label value. Show all posts
Showing posts with label Making radio buttons look like buttons and getting radio and label value. Show all posts

Thursday, 3 December 2015

Making radio buttons look like buttons and getting radio and label value



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>