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

Posted 2023-03-10

【中文标题】输入类型单选按钮检查 else 语句在 jquery 中不起作用

【英文标题】：input type radio button checked else statement not working in jquery

【发布时间】：2016-07-14 10:50:01

【问题描述】：

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

这是我的代码

<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

【问题讨论】：

很抱歉，我问这个问题后我在外地，所以回复晚了。我真的很感谢所有曾经帮助过我的人，让我知道我错在哪里。我已阅读此页面中的整个对话。感谢所有人的帮助。我通过使用自定义无线电 btn css 知道这一点，但对于我的项目来说有点担心，所以我选择了 jquery。 @Asad 的所有代码、Reddy 和 Webeno 的代码也都在工作，但我选择了 Reddy 的简单链接。我已经更新了我的codepen codepen.io/amitabha197/pen/KzqvWv，再次感谢大家的合作

【参考方案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

【讨论】：

@Reddy 就像我说的，您没有阅读问题。他想将该类添加到新选中的单选按钮父级，并且他想从所有其他（未选中）单选按钮父级中删除该类。他的逻辑是正确的，他只需要将其放入所有单选按钮的迭代器中

@Reddy 你坚持认为 OP 想要取消选中单选按钮 - 这不是他们想要的。他们只是希望将一个类添加到选中的单选按钮中，因此实际上会总是被选中...顺便说一句，使用单选按钮时，将总是 成为一些（如果不是更多）未选中的（如果选中了一个）... ;)

@Reddy“我想在单选按钮的父包装器中添加一个类（...）我想在未选中单选按钮时删除新类” - 这里有什么不清楚的地方？

@Reddy 因为 OP 显然是 jQuery 的新手，并且不完全理解如何解决这个问题，这就是他们发布问题的原因.. OP 表达的需求 > 他们的代码

@webeno 你们是对的，我在看到他的 codepen 之后就明白了。如果不是这样，我会再坐下来争论几个小时：D

【参考方案2】：

已编辑

用于代码优化和模块化。

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

【讨论】：

但是$('input[type="radio"][name="'+name+'"]:checked') 将始终等于$(this)，因为这是被检查并触发了事件的那个。

【参考方案3】：

使用这个功能会解决你的问题

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

【讨论】：

这个@Amitabha有问题吗？

【参考方案4】：

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

HTML 标签元素 (<label>) 表示项目的标题 在用户界面中。它可以通过以下方式与控件相关联 将控制元素放在<label> 元素内，或者使用 for 属性。这样的控件称为labeled control 标签元素。一个输入可以关联多个标签。

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

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

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属性是@987654346 @ 在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>