jquery change css from radio input

Question

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());}
});

j08691 · Accepted Answer · 2013-12-02 20:35:34Z

3

Change your jQuery to just:

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

jsFiddle example

answered Dec 2, 2013 at 20:35

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Irfan TahirKheli · Accepted Answer · 2013-12-02 20:36:49Z

0

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

answered Dec 2, 2013 at 20:36

Irfan TahirKheli

3,6621 gold badge26 silver badges36 bronze badges

Comments

Antarr Byrd · Accepted Answer · 2013-12-02 20:37:36Z

0

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());}
});

answered Dec 2, 2013 at 20:37

Antarr Byrd

26.4k33 gold badges113 silver badges203 bronze badges

Collectives™ on Stack Overflow

jquery change css from radio input

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related