纯CSS解决方案：

Question

我有一个单选按钮组，如下所示

<input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="8" accessory="14" img="/male/C8A14">
<input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="9" accessory="15" img="/male/C9A15">
<input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="10" accessory="16" img="/male/C10A16">

以此类推。

使用JQuery单击按钮时，我需要向未单击的单选按钮添加CSS类。

下面的代码无法正常工作，单击时会添加一个类。

$('.radiowear').click(function() {
  if ($('input:radio[name=wear_radio]').not(":checked")) {
    $(this).addClass('low-up');
  } else {
    $(this).removeClass('low-up');
  }
  console.log(this.getAttribute('class'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="8" accessory="14" img="/male/C8A14">
<input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="9" accessory="15" img="/male/C9A15">
<input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="10" accessory="16" img="/male/C10A16">

有什么更好的方法？谢谢。

Answer 1

只需更改所有类，然后删除它-我必须包裹一个标签才能看到对该类的任何更改。如果要改为在广播中更改类，请删除.parent（）

我添加了一个用于检查的测试，以便在已经检查的情况下触发更改加载

const $wearradios =  $('.radiowear');
$wearradios.on("change",function(e) {
  $wearradios.parent().addClass("low-up");
  $(this).parent().toggleClass("low-up",!this.checked)
}).change();

.low-up { background-color:red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="radio" class="radiowear" 
  name="wear_radio" data-shoe="" data-cloth="8" data-accessory="14" data-img="/male/C8A14"></label>
<label><input type="radio" class="radiowear" 
  name="wear_radio" data-shoe="" data-cloth="9" data-accessory="15" data-img="/male/C9A15"></label>
<label><input type="radio" class="radiowear" 
  name="wear_radio" data-shoe="" data-cloth="10" data-accessory="16" data-img="/male/C10A16"></label>

Answer 2

停止使用无效的HTML5属性。请改用DECLARE DefaultResponse INT DEFAULT -1;属性。

纯CSS解决方案：

SELECT CAST(-1 AS UNSIGNED)

data-*

jQuery解决方案

请勿使用[name="wear_radio"]:not(:checked) { outline: 2px solid red; }事件。您知道不用鼠标即可更改复选框吗？使用<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="radio" name="wear_radio" data-shoe="" data-cloth="8" data-accessory="14" data-img="/male/C8A14"> <input type="radio" name="wear_radio" data-shoe="" data-cloth="9" data-accessory="15" data-img="/male/C9A15"> <input type="radio" name="wear_radio" data-shoe="" data-cloth="10" data-accessory="16" data-img="/male/C10A16">
使用jQuery的'click'或更确切地说'change'进行回调

.attr()

.prop()

const $wear_radio = $('[name="wear_radio"]');

$wear_radio.on('change', function() { 
  $wear_radio.prop('class', function() {
    $(this).toggleClass('low-up', !this.checked)
  });
});

Answer 3

获取未经检查的输入，而不是$(this).addClass('low-up');，并向它们添加类。

$('.radiowear').change(function() {
  const unCheckedInputs = $('input:radio[name=wear_radio]').not(":checked");
  unCheckedInputs.addClass('low-up');
  $(this).removeClass('low-up');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="8" accessory="14" img="/male/C8A14">
<input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="9" accessory="15" img="/male/C9A15">
<input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="10" accessory="16" img="/male/C10A16">

Answer 4

首先，不要听广播中的click事件；如果我通过键盘或其他输入方式更改它，则不会触发。改为监听change个事件。

第二，您需要.siblings()：

$('.radiowear').on('change', function() {
    $(this).removeClass('low-up').siblings('.radiowear').addClass('low-up');
});

Answer 5

使用change事件和siblings()

$('.radiowear').change(function() {
  $(this)
    .removeClass('low-up')
    .siblings()
    .addClass('low-up')
});

.radiowear:not(.low-up) {
  transform: scale(1.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="8" accessory="14" img="/male/C8A14">
<input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="9" accessory="15" img="/male/C9A15">
<input type="radio" class="radiowear" name="wear_radio" shoe="" cloth="10" accessory="16" img="/male/C10A16">

如何将类别添加到单选按钮组中未单击的单选按钮

5 个答案:

纯CSS解决方案：

jQuery解决方案