<div>
<label class="local">
<input name="1" type="radio" value="1">
</label>
<label class="local">
<input name="2" type="radio" value="2">
</label>
<label class="local">
<input name="3" type="radio" value="3">
</label>
</div>
求大神帮我写个当点击其中一个按钮后，自动给<label class="local">中的class里面再加个样式如 ach 变成<label class="local ach">
当点击第二个的按钮后 第一个ach消失 自动加给第二个input的css
第三个，第四个.....同上哈
求大神帮帮忙，谢谢
第1个回答 2016-10-26
处理radio的onclick事件，在事件处理函数中使用对象的className来修改class的值。代码类似:
HTML:
<input name="1" type="radio" value="1" onclick="onRadioClk(this);" />
JavaScript:
var g_preObj;
function onRadioClk(radioObj) {
if (g_preObj != null) {
g_preObj.parent.className = "local";
}
radioObj.parent.className = "local ach";
g_preObj = radioObj;
}
不过，class名称中有空格好像不符合命名规则吧。
HTML:
<input name="1" type="radio" value="1" onclick="onRadioClk(this);" />
JavaScript:
var g_preObj;
function onRadioClk(radioObj) {
if (g_preObj != null) {
g_preObj.parent.className = "local";
}
radioObj.parent.className = "local ach";
g_preObj = radioObj;
}
不过，class名称中有空格好像不符合命名规则吧。
第2个回答 2016-10-26
jquery比较简单，javascript方法比较冗余一点。。
<div><label id="1" class="local">
<input name="1" type="radio" value="1" onclick="addClass(1)">
</label>
<label id="2" class="local">
<input name="1" type="radio" value="2" onclick="addClass(2)">
</label>
<label id="3" class="local">
<input name="1" type="radio" value="3" onclick="addClass(3)">
</label>
</div>
<script>
function addClass(str){
switch(str){
case 1:
document.getElementById("1").className="local ach";
document.getElementById("2").className="local";
document.getElementById("3").className="local";
break;
case 2:
document.getElementById("1").className="local";
document.getElementById("2").className="local ach";
document.getElementById("3").className="local";
break;
case 3:
document.getElementById("1").className="local";
document.getElementById("2").className="local";
document.getElementById("3").className="local ach";
break;
default:
document.getElementById("1").className="local";
document.getElementById("2").className="local";
document.getElementById("3").className="local";
break;
}
}
</script>本回答被提问者采纳
第3个回答 2016-10-26
需要先引用jquery的库，这些代码你试试，希望可以帮到你
$(document).ready(function(){
$("input[type='radio']").click(function(){
if($(this).prop("checked")==true){
$(this).parent().addClass("ach").siblings().removeClass("ach");
}
})
})
$(document).ready(function(){
$("input[type='radio']").click(function(){
if($(this).prop("checked")==true){
$(this).parent().addClass("ach").siblings().removeClass("ach");
}
})
})
