选中单选按钮时尝试使用 javascript 添加唯一 class

Question

我正在尝试使用 java脚本来更改单选标签选中时的背景颜色。每个单选按钮将应用不同的 class 或颜色。由于 css 与插件冲突，我需要使用 java。还需要 radio value 字段用于动态目的，因此不能使用该字段添加 class.

这是我所在的位置：

$(window).load(function() {
  $('#emailGroup1').change(function() {
    if (this.checked) {
      $(this).parent().addClass('Good');
    } else {
      $(this).parent().removeClass('Good');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="confirmGroup">
  <form>
    <label id="emailGroup">
      <input type="radio" name="emailConfirm" id="emailGroup1" value="Pending" checked>
      Pending
    </label>
    <label id="emailGroup">
      <input type="radio" name="emailConfirm" id="emailGroup2" value="Good">
      Good
    </label>
    <label id="emailGroup">
      <input type="radio" name="emailConfirm" id="emailGroup3" value="Bad">
      Bad
    </label>
  </form>
</div>

我想让 java 脚本读取默认选中的单选按钮并在页面加载时应用 class。然后当用户选择不同的单选按钮时，class 从默认选中中删除并应用于选择。

Answer 1

试试这个

  $('.emailGroup input').change(function() {
    if (this.checked) {
      $(this).parent().parent().addClass('Good');
    } else {
      $(this).parent().parent().removeClass('Good');
    }
  });

#confirmGroup{
  color: red;
}
.Good {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="confirmGroup">
  <form>
    <label class="emailGroup">
      <input type="radio" name="emailConfirm" value="Pending" >
      Pending
    </label>
    <label class="emailGroup">
      <input type="radio" name="emailConfirm" value="Good">
      Good
    </label>
    <label class="emailGroup">
      <input type="radio" name="emailConfirm" value="Bad">
      Bad
    </label>
  </form>
</div>

Answer 2

$('input[type=radio]') 选择器将事件绑定到所有无线电输入。并使用 .trigger() 方法在页面加载时调用无线电输入 change 事件。

$(window).load(function() {
  $('input[type=radio]').change(function() {
    if ($(this).is(':checked')) {
      $(this).parent().addClass('Good');
    } else {
      $(this).parent().removeClass('Good');
    }
  }).trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="confirmGroup">
  <form>
    <label id="emailGroup">
      <input type="radio" name="emailConfirm" id="emailGroup1" value="Pending" checked>
      Pending
    </label>
    <label id="emailGroup">
      <input type="radio" name="emailConfirm" id="emailGroup2" value="Good">
      Good
    </label>
    <label id="emailGroup">
      <input type="radio" name="emailConfirm" id="emailGroup3" value="Bad">
      Bad
    </label>
  </form>
</div>

Answer 3

你应该听单选按钮而不是标签，我看到你为标签设置了一个不唯一的 ID 这是错误的，html 标签的 ID 应该有一个唯一的值。

$(window).load(function() {
  $('input[name=emailConfirm]').change(function() {
    $('.emailGroup').removeClass('Good')
    $(this).parent().addClass('Good');
  });
});

.Good {
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="confirmGroup">
  <form>
    <label class="emailGroup Good">
    <input type="radio" name="emailConfirm" value="Pending" checked>
    Pending</label>
    <label class="emailGroup">
    <input type="radio" name="emailConfirm" value="Good">
    Good</label>
    <label class="emailGroup">
    <input type="radio" name="emailConfirm" value="Bad">
    Bad</label>
  </form>
</div>

Answer 4

您的问题是由于您重复使用了无效的 id 属性。您可以改为使用常见的 class 属性来定位您的元素，然后根据需要应用 good class。试试这个：

$('.email').change(function() {
  $('.emailGroup.good').removeClass('good');
  $(this).closest('.emailGroup').addClass('good');
});

.good { background-color: #0D0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="confirmGroup">
  <form>
    <label class="emailGroup">
      <input type="radio" name="emailConfirm" id="emailGroup1" value="Pending" checked="true" class="email">
      Pending
    </label>
    <label class="emailGroup">
      <input type="radio" name="emailConfirm" id="emailGroup2" value="Good" class="email">
      Good
    </label>
    <label class="emailGroup">
      <input type="radio" name="emailConfirm" id="emailGroup3" value="Bad" class="email">
      Bad
    </label>
  </form>
</div>

另请注意，这可以通过稍微修改 HTML:

单独使用 CSS 来实现

.email:checked + label { 
  background-color: #0C0;
}

<div id="confirmGroup">
  <form>
    <input type="radio" name="emailConfirm" id="emailGroup1" value="Pending" checked="true" class="email">
    <label class="emailGroup" for="emailGroup1">
      Pending
    </label>

    <input type="radio" name="emailConfirm" id="emailGroup2" value="Good" class="email">
    <label class="emailGroup" for="emailGroup2">
      Good
    </label>

    <input type="radio" name="emailConfirm" id="emailGroup3" value="Bad" class="email">
    <label class="emailGroup" for="emailGroup3">
      Bad
    </label>
  </form>
</div>

Answer 5

$(window).load(function() {
  $("input[type=radio]:checked").parent().css('background','yellow');
  $('input[name=emailConfirm]').change(function() {
    $('.emailGroup').css('background','none');
    if($(this).val() == "Good"){
      $(this).parent().css('background','green');
    }
    if($(this).val() == "Bad"){
      $(this).parent().css('background','red');
    }
    if($(this).val() == "Pending"){
      $(this).parent().css('background','yellow');
    }
    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="confirmGroup">
  <form>
    <label class="emailGroup">
    <input type="radio" name="emailConfirm" value="Pending" checked>
    Pending</label>
    <label class="emailGroup">
    <input type="radio" name="emailConfirm" value="Good">
    Good</label>
    <label class="emailGroup">
    <input type="radio" name="emailConfirm" value="Bad">
    Bad</label>
  </form>
</div>

选中单选按钮时尝试使用 javascript 添加唯一 class

Trying to use javascript to add unique class when radio button checked

javascript

jquery

css

radio-button

checked