Question

我正在尝试使用javascript来更改收音机标签的背景颜色。每个单选按钮将应用不同的类或颜色。我需要使用java，因为css与插件冲突。还需要无线电值字段用于动态目的，因此不能使用该字段来添加类。

这是我在的地方：

$(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>

我想让javascript读取默认选中的单选按钮，并在页面加载时应用该类。然后，当用户选择不同的单选按钮时，将从默认选中删除类并将其应用于选择。

Answer 1

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

$('.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 2

＆＃13;

$(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');
    }
    
  });
});

＆＃13;

<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>

＆＃13;

Answer 3

试试这个

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

$('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 5

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

＆＃13;

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

＆＃13;

.Good {
  background: red
}

＆＃13;

<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>

＆＃13;

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

5 个答案: