Question

我写下面的代码来检查是否没有选中单选按钮做另一个功能。但是这里的代码不起作用是我的代码片段：

$('.multiway').change(function(){
   if ($('.multiway').is(':checked')){
       $("#cityadd").removeClass("multiflight");
    $("#cityadd").addClass("multiflight-checked");
   }
   else{
	    if ($('.multiway').not(':checked')){
 $("#cityadd").removeClass("multiflight-checked");
    $("#cityadd").addClass("multiflight");
	}}
});

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
  .multiflight{display:none !important;}
  .multiflight-checked{display:block !important;}

  </style>  
</head>

<body>
 1 <input type="radio"  class="multiway" name="ways">
    2 <input type="radio"  name="ways">

<div class="newcity multiflight" id="cityadd">HELLOO</div>

</body>
</html>

Answer 1

您需要将事件绑定到ways输入，而不是绑定到特定的按钮：

$('input[name="ways"]').change(function(){
   if ($('.multiway').is(':checked')){
       $("#cityadd").removeClass("multiflight");
       $("#cityadd").addClass("multiflight-checked");
   }
   else{
    if ($('.multiway').not(':checked')) {
        $("#cityadd").removeClass("multiflight-checked");
        $("#cityadd").addClass("multiflight");
    }
   }
});

https://jsfiddle.net/6xhcfc56/1/

但是，通过在表单中添加value属性并对其提出质疑，您可以使事情变得更简洁和优雅：

HTML：

<input type="radio"  class="multiway" name="ways" value="0">1
<input type="radio"  name="ways" value="1">2

JS：

$('input[name="ways"]').change(function(){
  var val = $(this).val();
  if(val == 0)
    $('#cityadd').removeClass('multiflight')
  else
    $('#cityadd').addClass('multiflight')
});

https://jsfiddle.net/f15LnedL/2/

Answer 2

 $('.multiway').change(function(){
     if ($(this).prop('checked')){ 
    $("#cityadd").removeClass("multiflight"); 
    $("#cityadd").addClass("multiflight-checked"); } 
else{    
    $("#cityadd").removeClass("multiflight-checked"); 
    $("#cityadd").addClass("multiflight");  
    }
     });

如何在未选中单选按钮时执行此功能

2 个答案: