html5 单选框触发事件,[HTML5] radio改变触发change事件

#frame{

width:600px;

height:300px;

border:solid 0px gold;

}

#left{

float:left;

}

#right{

float:left;

margin:30px;

}

fieldset{

width:350px;

height:200px;

}

img{

width:140px;

height:200px;

}

input{

margin:15px;

}

.img1{

width:140px;

height:200px;

border:solid 1px grey;

}

.img2{

width:140px;

height:200px;

border:solid 1px red;

}

.img3{

width:140px;

height:200px;

border:solid 3px red;

}

.img4{

width:140px;

height:200px;

border:solid 3px red;

padding:3px;

}

#text{

float:left;

margin-left:5px;

}

#tip{

float:left;

}

设置

加框

加红色框

加红色粗线框

加红色有内边距粗线框

当前状态：

什么都没有...

$("input:radio[name='style']").change(function (){

var opt=$("input:radio[name='style']:checked").val();//①

$("#pic").removeClass();

$("#pic").addClass("img"+opt);

$("#tip").text($("input[name='style']:checked").next("label").text());//②

$("#tip").css("color","red");

});

放了假学习了一下HTML5，感觉做起来很有成就感呢，JQ太不熟，用JQ获得选定内容时卡了很久。

1.①单选的实现：将单选框用name统一联系起来；

2.①取选项的值时用函数val()，刚开始想当然的用.value

3.紧接着下面的四行JQ代码是比较得意的一段。进行了优化，没有用四个if语句造成冗余

4.②取出radio后面的选项文字可以把文字用表示，以便于灵活的调用，调用方法$(...).next("label").text()