如何定义是否未选中单选按钮

时间:2017-11-28 08:51:16

标签: javascript jquery

我有两个单选按钮,我想定义它,如果没有选中单选按钮将显示块设置为错误但是它。我写了下面的代码,但我认为它正在解决这两个问题。如何定义如果其中一个被检查是真的并且不需要对它们两者运行这个函数? 这是我的片段:

$(".nexti").click(function(){
	 if (!$(this).find('input[name=radio]').is(':checked')) {
		$(".alertnext").css("display","block"); 
	 }
   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
First <input type="radio" name="radio"  value=""  />
Second <input type="radio" name="radio"  value=""  /> 
<div class="alertnext" style="display:none;"> Error !</div>
<button type="" class="nexti">Next</button>

6 个答案:

答案 0 :(得分:3)

请勿在点击功能中使用thisfind(),只需输入选择器:

&#13;
&#13;
$(".nexti").click(function(){
    if (!$('input[name=radio]').is(':checked')) {
	 $(".alertnext").css("display","block"); 
    } else $(".alertnext").css("display","none"); 
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
First <input type="radio" name="radio"  value=""  />
Second <input type="radio" name="radio"  value=""  /> 
<div class="alertnext" style="display:none;"> Error !</div>
<button type="" class="nexti">Next</button>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

试试这段代码:

$(".nexti").click(function(){
  $(".alertnext").css("display","none"); 
  if (!$('input[name=radio]').is(':checked')) {
    $(".alertnext").css("display","block"); 
 }
});

答案 2 :(得分:0)

$(".nexti").click(function(){
 if (!$('input[name=radio]').is(':checked')) {
    $(".alertnext").css("display","block"); 
 }
});

答案 3 :(得分:0)

尝试使用ids

&#13;
&#13;
$(".nexti").click(function() {
console.log()
  if (!$('#rbf').is(':checked')||$('#rbs').is(':checked')) {
    $(".alertnext").css("display", "block");
  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
First <input type="radio" id='rbf' name="radio" value="" />
Second <input type="radio" id='rbs' name="radio" value="" />
<div class="alertnext" style="display:none;"> Error !</div>
<button type="" class="nexti">Next</button>
&#13;
&#13;
&#13;

答案 4 :(得分:0)

$("document").ready(function()
{
	$("[name='rd']").change(function ()
	{
		$("#txt").html($("input[name='rd']:checked").val());
	});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
First <input type="radio" name="rd"  value="first"  /><br>
Second <input type="radio" name="rd" value="second"  /> 
<div id="txt"></div>

答案 5 :(得分:0)

你可能会用这个:

!$('input[name=radio]')
.toArray()
.every(function (val) {
   return $(val).prop('checked')
})

if(...)条件下。

否则,您可以使用:

var error = !$('input[name=radio]')
    .toArray()
    .every(function (val) {
        return $(val).prop('checked')
    })

if(error) { //show error }

基本上,.every(...)检查是否都检查了它们。 .prop(...)是对checked的更好测试。因此,使用两者都可以实现您的需求。