被修改

Question

我想在单选按钮的父包装中添加一个类，我这样做了，它正在工作，但是其他语句不起作用

这是我的代码

<div class="radio">
    <input type="radio" name="name[]" checked>
</div>

<div class="radio">
    <input type="radio" name="name[]">
</div>

这是我的JS

$(document).ready(function(){
  $('input[type="radio"]').on('click',function(){
    if($(this).prop('checked')){
      $(this).parent().addClass('new')
    }
    else {
      $(this).parent().removeClass('new')
    }
  });
})

我想在未选中单选按钮时删除新类，但它不起作用。例如 http://codepen.io/amitabha197/pen/KzqvWv

Answer 1

webeno 和 mhodges 指出了正确的方向，这是我的解决方案。

  $('input[type="radio"]').on('change',function(){
    $(this).parent().addClass('new').siblings().removeClass('new');        
  });

同样请记住，如果你一直试图取消选中一个单选按钮，那就知道了。

您无法取消选中单选按钮。您对其执行的所有点击都会对其进行检查，使用复选框。

<强> Why is it impossible to deselect HTML “radio” inputs?

<强> Unable to uncheck radio button

Answer 2

被修改

用于代码优化＆amp;模块化。

$(document).ready(function(){
  $('input[type="radio"]').on('click',function(){
    var name = $(this).attr("name");
    $('input[type="radio"][name="'+name+'"]').closest(".radio").removeClass("new");
    $(this).closest(".radio").addClass("new");
  });
});

Answer 3

使用此功能将解决您的问题

$(document).ready(function(){
  $('input[type="radio"]').on('change',function(){
    $(this).parent().addClass('new');
    $('input[type="radio"]').not(this).parent().removeClass('new');
  });
});

Answer 4

您可以在<input type="radio">添加<label>元素作为html元素的父元素。

HTML标签元素（<label>）表示项目的标题在用户界面中。它可以与控件相关联将控制元素放在<label>元素内，或者使用 for属性。这种控件称为标记的控件 标签元素。一个输入可以与多个标签相关联。

父label元素将与:checked第一个子女后代input相关联。

当css元素为:after时，您可以将:checked border伪元素复合到input选择器，以显示蓝色:checked。

div.radio {
  display: inline-block;
}
label.radio {
  display: inline-block;
  width: 100px;
  border: 1px solid #000;
}
label.radio > :checked:after {
  content: "";
  position: relative;
  display: inline-block;
  width: 100px;
  height: 20px;
  left: -6px;
  top: -4px;
  border: 1px solid blue;
}

<div class="radio">
  <label class="radio">
    <input type="radio" id="radio1" name="name[]" checked>
  </label>
</div>
<div class="radio">
  <label class="radio">
    <input type="radio" for="radio2" name="name[]">
  </label>
</div>

如果要求使用现有html，jQuery，您可以使用.click()，.toggleCLass()添加，删除"new" className后代input元素checked属性false位于click个事件，将input checked属性设置为true

$(document).ready(function() {
  var radio = $(".radio");
  radio.click(function(e) {
    var input = e.target.querySelector("input[type=radio]");
    if (!input.checked) {
      radio.toggleClass("new");
      input.checked = true;
    }
  })
})

.radio {
  display: inline-block;
  width: 100px;
  border: 1px solid #000;
}
.new {
  display: inline-block;
  width: 100px;
  border: 1px solid blue !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="radio new">
  <input type="radio" name="name[]" checked>
</div>

<div class="radio">
  <input type="radio" name="name[]">
</div>

输入类型单选按钮检查else语句不在jquery中工作

4 个答案:

被修改