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

I want to add a class in the parent wrapper of radio button, I did so , it is working but else statement is not workin

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

Here is my code

这是我的代码

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

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

This is my JS

这是我的JS

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

I want to remove the class new when the radio button is not checked, but it is not working. e.g. http://codepen.io/amitabha197/pen/KzqvWv

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

4 个解决方案

#1

After webeno and mhodges pointed me to the right direction here is my solution.

在webeno和mhodges向我指出正确的方向后,这是我的解决方案。

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

---

Also point to remember, If at all you had been trying to uncheck a single radio button then know this.

还要指出要记住,如果你一直试图取消选中一个单选按钮,那就知道了。

You cannot uncheck a radio button. All the clicks you do on it will keep it checked, Use checkbox instead.

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

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

为什么不能取消选择HTML“无线电”输入?

Unable to uncheck radio button

无法取消选中单选按钮

#2

use this function will solve you problem

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

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

#3

Edited

For code optimization & modularity.

用于代码优化和模块化。

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

#4

You can include <label> element as parent of <input type="radio"> elements at html.

您可以在html中包含元素作为元素的父元素。

The HTML Label Element (<label>) represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the <label> element, or by using the for attribute. Such a control is called the labeled control of the label element. One input can be associated with multiple labels.

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

The parent label element will be associated with :checked first child descendant input.

父标签元素将与:checked第一个子后代输入相关联。

You can style css :after pseudo element compounded to :checked selector to display blue border when input element is :checked.

您可以设置css样式:将伪元素复合到:选中选择器以在输入元素为:选中时显示蓝色边框。

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>

---

If requirement is to use existing html, jQuery, you can utilize .click(), .toggleCLass() to add, remove "new" className if descendant input element checked property is false at click event, set input checked property to true

如果要求使用现有的html,jQuery,你可以利用.click(),. toggleCLass()添加,删除“new”className如果在click事件中后代输入元素checked属性为false,则将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>