单选框(radio)选中时如何修改其关联label内部多个DOM元素的CSS

CSS方案（推荐，无需引入脚本） #

你可以直接基于已有的选中状态选择器，通过后代选择器定位到label内部的img元素即可。由于你的img标签自带行内width: 80px样式，需要使用!important提升优先级覆盖行内样式，或者将行内宽度定义迁移到外部样式表中：

input[type=radio][name='rate']:checked + label .rateImage {
  /* 自定义你需要的尺寸 */
  width: 120px !important;
  height: auto;
}

jQuery方案 #

如果需要做更复杂的动态交互逻辑，可以绑定单选框的change事件实现效果：

$('input[type=radio][name="rate"]').on('change', function() {
  // 先重置所有同组radio关联的img尺寸
  $('input[type=radio][name="rate"]').each(function() {
    $(this).next('label').find('.rateImage').css('width', '80px');
  });
  // 给当前选中的radio关联的img设置放大尺寸
  if ($(this).is(':checked')) {
    $(this).next('label').find('.rateImage').css('width', '120px');
  }
});

内容的提问来源于stack exchange，提问作者Panadol Chong