Javascript jQuery:使用parent（）和next（）在单击单选按钮时设置样式和取消样式

我有3个相同的部分。他们彼此完全一样
我试图实现的是，当我单击“.rad1”（第一个单选按钮）时，它会设置其标签的样式
当我单击“.rad2”时，它应该取消第一个单选按钮的样式化，并设置第二个单选按钮的样式化

我只希望它发生在它自己的部分，即当我单击一个部分时，样式只应用于该部分，而不应用于其他部分

这就是我所拥有的，但我还没有找到实现它的方法：

$（'.rad1'）。单击（函数（）{
$（this）.parent（'.label1'）.css（'background'，'red'）；
});
$（'.rad2'）。单击（函数（）{
$（this）.parent（）.next（'.label1'）.css（'background'，'transparent'）；
$（this）.parent（'.label2'）.css（'background'，'red'）；
});
。表单部分{
背景：橙色；
边框：1px纯黑；
}

弗斯特
第二
弗斯特
第二
弗斯特
第二
我会这样做：

$('input[name="rad"]').click(function() {
  $(this).closest('form').find('label').css('background', 'transparent')
  $(this).parent().css('background', 'red');
});


$（'input[name=“rad”]）。单击（函数（）{
$（this）.closest（'form'）.find（'label'）.css（'background'，'transparent'））
$（this.parent（）.css（'background'，'red'）；
});
。表单部分{
背景：橙色；
边框：1px纯黑；
}

弗斯特
第二
弗斯特
第二
弗斯特
第二
有很多更好的方法，但我遵循您的方法：

$('.rad1').click( function() {
    $(this).parent('.label1').css('background', 'red');
    $('.rad2').parent('.label2').css('background', 'transparent');
});
$('.rad2').click( function() {
    $(this).parent('.label2').css('background', 'red');
    $('.rad1').parent('.label1').css('background', 'transparent');
});

如果您对结构稍作更改，也可以不使用javascript，完全使用CSS

我从复制j08691的代码片段开始，然后注释掉javascript，并移动每个单选按钮的
标签
，使其跟随而不是包围

更改后，如果标签是
：checked
单选按钮的同级，则可以编写一个CSS选择器以该标签为目标。未选中的按钮将保留其继承的橙色背景


/*$（'input[name=“rad”]”）。单击（函数（）{
$（this）.closest（'form'）.find（'label'）.css（'background'，'transparent'））
$（this.parent（）.css（'background'，'red'）；
});*/
。表单部分{
背景：橙色；
边框：1px纯黑；
}
.表单部分输入[type=“radio”]：选中+标签{
背景：红色；
}

弗斯特
第二
弗斯特
第二
弗斯特
第二
for=“radio”
应该是
for=“”
，当收音机包装在标签上时，它不需要，非常感谢，当有人能给我如此简洁的答案时，这是令人惊讶的，也许我感到无法自己回答，然后找到答案的喜悦……但无论如何，这个答案非常完美。
$('.rad1').click(function(){ 
   $(this).parent()
     .css('background','red');
});
$('.rad2').click(function(){
   $(this).closest('div')
     .prev().find('.label1')
     .css('background','transparent');
   $(this).parent()
     .css('background','red');
});