CODEWITHSUNDEEP
jquery
Gord
Gord

Reputation: 73

jquery change css from radio input

I have inputs working for a color selector but I'm missing something when it comes to radio inputs.
I'd appreciate any help
This is the fiddle http://jsfiddle.net/mpxgC/1/

-------HTML---------

<div>
<label>
    <input class=width name=group1 value=1px type=radio />1px
</label>
<label>
    <input class=width name=group1 value=2px type=radio />2px
</label>
</div>
<div class=number2></div>

-------CSS---------

.number2 {
    width:100px;
    height:100px;
    border:2px solid #000000;
    border-width:3px;
}

-------jQuery---------

$("input[name='group1']:radio").change(function (){
if(this.checked) {$("div.number2").css('border-width',$('.width').val());}
});

Upvotes: 0

Views: 107

Answers (3)

Antarr Byrd
Antarr Byrd

Reputation: 26071

try this

<div>
<label>
    <input class=width name=group1 value=1px type=radio id="radio1" />1px
</label>
<label>
    <input class=width name=group1 value=2px type=radio id="radio2" />2px
</label>
</div>


$("#radio1,#radio2").change(function (){
if(this.checked)
{$(".number2").css('border-width',$(this).val());}
});

Upvotes: 0

Irfan TahirKheli
Irfan TahirKheli

Reputation: 3662

Should be $('.width').text().trim() instead of $('.width').val()

Upvotes: 0

j08691
j08691

Reputation: 207901

Change your jQuery to just:

$("input[name='group1']").change(function () {
        $("div.number2").css('border-width', $(this).val());
});

jsFiddle example

Upvotes: 3

Related Questions