如果选中单选按钮或不是JQuery

Question

我这里没有任何表格。只有几个div有一些问题。我想检查这里是否选中了单选按钮，如果选中它，则将其值存储在一个数组中并移动到下一个屏幕。我发现客户端验证所需的属性仅适用于表单，我在这里没有任何表单。

这是我的html：

<div class="first-div">
    <p>Question1: Where in the world would you find the Spire?</p>
    <span><input type="radio" name="radio" id="a1" value="a1" /> Kerry. </input></span>
    <span><input type="radio" name="radio" id="a1" value="a1" /> Galway. </input></span>
    <span><input type="radio" name="radio" id="a1" value="a1" /> Dublin. </input></span>
    <span><input type="radio" name="radio" id="a1" value="a1" /> Donegal. </input></span>
    <div class="button_box">
        <button class="back" disabled="true" style="color:#aaa">Back</button>
        <button class="next">Next</button>
    </div>
</div>

<div class="next-div" style="display:none;">
    <p>Question2: Where in the world would you find the Colosseum?</p>
    <span><input type="radio" name="radio" id="b1" value="a2" /> Taipei. </input></span>
    <span><input type="radio" name="radio" id="b1" value="a2" /> Rome. </input></span>
    <span><input type="radio" name="radio" id="b1" value="a2" /> Reykjavic. </input></span>
    <span><input type="radio" name="radio" id="b1" value="a2" /> Brussels. </input></span>
    <div class="button_box">
        <button class="back">Back</button>
        <button class="next">Next</button>
    </div>
</div>

<div class="next-div" style="display:none;">
    <p>Question3: Where in the world would you find the Colosseum?</p>
    <span><input type="radio" name="radio" id="c1" value="a3" /> Taipei. </input></span>
    <span><input type="radio" name="radio" id="c1" value="a3" /> Rome. </input></span>
    <span><input type="radio" name="radio" id="c1" value="a3" /> Reykjavic. </input></span>
    <span><input type="radio" name="radio" id="c1" value="a3" /> Brussels. </input></span>
    <div class="button_box">
        <button class="back">Back</button>
        <button class="next">Next</button>
    </div>
</div>
<div class="next-div" style="display:none;">
    <p>Question4: Where in the world would you find the Colosseum?</p>
    <span><input type="radio" name="radio" id="d1" value="a3" /> Taipei. </input></span>
    <span><input type="radio" name="radio" id="d1" value="a3" /> Rome. </input></span>
    <span><input type="radio" name="radio" id="d1" value="a3" /> Reykjavic. </input></span>
    <span><input type="radio" name="radio" id="d1" value="a3" /> Brussels. </input></span>
    <div class="button_box">
        <button class="back">Back</button>
        <button class="finish">Finish</button>
    </div>
</div>

现在是我的jquery

$('.next').click(function(){
   $(this).parent().parent().hide().next().show();//hide parent and show next
});

$('.back').click(function(){
   $(this).parent().parent().hide().prev().show();//hide parent and show previous
});

Answer 1

检查这将有所帮助： -

var checkedValues = [];
 $('.next').click(function() {
    var $form = $(this).parent().parent();
    var $checked =     $(this).parent().parent().find('input[type=radio]:checked')
    var isChecked = $checked.length > 0;
    if(!isChecked){
      alert('Please Choose an option.');
      return;
    }
    checkedValues.push($checked.val());
    console.log($checked.val());
    $form.hide().next().show(); //hide parent and show next
  });

  $('.back').click(function() {
    console.log('back');
    $(this).parent().parent().hide().prev().show(); //hide parent and show previous
  });

这是一个有效的demo

Answer 2

使用jQuery的.prop()方法。 并且不要多次使用相同的id：

HTML：

<div id="first" class="first-div">
    <p>Question1: Where in the world would you find the Spire?</p> 
    <span><input type="radio" name="radio" id="a10" value="0" /> Kerry. </input></span>
    <span><input type="radio" name="radio" id="a11" value="1" /> Galway. </input></span>
    <span><input type="radio" name="radio" id="a12" value="2" /> Dublin. </input></span>
    <span><input type="radio" name="radio" id="a13" value="3" /> Donegal. </input></span>
    <div class="button_box">
       <button class="back" disabled="true" style="color:#aaa">Back</button>
       <button class="next">Next</button>
    </div>   
</div>

使用Javascript：

$("#first input").each(function () {
    if ( $(this).prop("checked") ) {
        console.log( $(this).val() );
    }
});

Answer 3

只需使用map即可。这是一个简单的解决方案。希望它有所帮助！

var arr = [];

    $('.next').click(function () {
        var self = $('input[type="radio"]:checked');
        if (!self.is(':checked')) {
            alert("Please choose an option");
            $(this).parent().show();
        }else {
            self.prop('checked', false);
            $(this).parent().parent().hide().next().show();
        }
    });

    $('.back').click(function () {
        $(this).parent().parent().hide().prev().show();
    });

    $('input[type="radio"]').on('click', function () {
        var get_values = $('input[type="radio"]:checked').map(function () {
            return this.value;
        }).get();
        arr.push(get_values[0]);
        console.log(arr);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="first-div">
    <p>Question1: Where in the world would you find the Spire?</p>
    <span><input type="radio" name="radio" id="a1" value="a1"/> Kerry. </input></span>
    <span><input type="radio" name="radio" id="a1" value="a1"/> Galway. </input></span>
    <span><input type="radio" name="radio" id="a1" value="a1"/> Dublin. </input></span>
    <span><input type="radio" name="radio" id="a1" value="a1"/> Donegal. </input></span>
    <div class="button_box">
        <button class="back" disabled="true" style="color:#aaa">Back</button>
        <button class="next">Next</button>
    </div>
</div>

<div class="next-div" style="display:none;">
    <p>Question2: Where in the world would you find the Colosseum?</p>
    <span><input type="radio" name="radio" id="b1" value="a2"/> Taipei. </input></span>
    <span><input type="radio" name="radio" id="b1" value="a2"/> Rome. </input></span>
    <span><input type="radio" name="radio" id="b1" value="a2"/> Reykjavic. </input></span>
    <span><input type="radio" name="radio" id="b1" value="a2"/> Brussels. </input></span>
    <div class="button_box">
        <button class="back">Back</button>
        <button class="next">Next</button>
    </div>
</div>

<div class="next-div" style="display:none;">
    <p>Question3: Where in the world would you find the Colosseum?</p>
    <span><input type="radio" name="radio" id="c1" value="a3"/> Taipei. </input></span>
    <span><input type="radio" name="radio" id="c1" value="a3"/> Rome. </input></span>
    <span><input type="radio" name="radio" id="c1" value="a3"/> Reykjavic. </input></span>
    <span><input type="radio" name="radio" id="c1" value="a3"/> Brussels. </input></span>
    <div class="button_box">
        <button class="back">Back</button>
        <button class="next">Next</button>
    </div>
</div>
<div class="next-div" style="display:none;">
    <p>Question4: Where in the world would you find the Colosseum?</p>
    <span><input type="radio" name="radio" id="d1" value="a4"/> Taipei. </input></span>
    <span><input type="radio" name="radio" id="d1" value="a4"/> Rome. </input></span>
    <span><input type="radio" name="radio" id="d1" value="a4"/> Reykjavic. </input></span>
    <span><input type="radio" name="radio" id="d1" value="a4"/> Brussels. </input></span>
    <div class="button_box">
        <button class="back">Back</button>
        <button class="finish">Finish</button>
    </div>
</div>

Answer 4

我为您制作了一个验证您问题的代码。如果用户没有选择任何答案，则会提醒他选择任何答案。如果用户选择任何答案，我会提醒相对于该输入的输入和文本的值，并将这两个值推送到我在console.log中的数组，您可以在控制台上检查该值。如有任何问题，请在此处查看我的代码 - ＆gt; https://jsfiddle.net/Arsh_kalsi01/81bLwLov/1/

＆＃13;

＆＃13;

  var valuesArray=[];


$('.next').click(function(){
		var obj = $(this);
    performMyAction(obj);
   
});
$('.finish').click(function(){
		var obj = $(this);
    performMyAction(obj);
   
});


    function performMyAction(obj)
    {
     		var objectmain = obj.parent().parent();
        var hasalert = true;
        
    		$(objectmain).find("input").each(function () {
          if ( $(this).is(':checked')) {
          var objval = $(this).val();
          var obtxt = $(this).parent().text();
          valuesArray.push({'value':objval,'Text':obtxt});
              alert( objval +obtxt);
              console.log(valuesArray);
              hasalert=false;
          }
    		});
        
        if(hasalert==true)
        {
        alert("Check Any Radio Button");
        }else{
        obj.parent().parent().hide().next().show();//hide parent and show next
        }
        
       
    }
    
    $('.back').click(function(){
       $(this).parent().parent().hide().prev().show();//hide parent and show previous
    });

＆＃13;

 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="first-div">
    <p>Question1: Where in the world would you find the Spire?</p> 
    <span><input type="radio" name="radio" class="First"  value="a1(1)"  /> Kerry. </span>
    <span><input type="radio" name="radio" class="First" value="a1(2)"  /> Galway. </span>
    <span><input type="radio" name="radio" class="First" value="a1(3)"  /> Dublin.</span>
    <span><input type="radio" name="radio"   class="First" value="a1(4)"  /> Donegal. </span>
    <div class="button_box">
        <button class="back" disabled="true" style="color:#aaa">Back</button>
       <button class="next">Next</button>
    </div>   

</div>

<div class="next-div" style="display:none;">
   <p>Question2: Where in the world would you find the Colosseum?</p> 
<span><input type="radio" name="radio"  class="second" value="a2(1)"  /> Taipei. </span>
<span><input type="radio" name="radio" class="second"  value="a2(2)"  /> Rome. </span>
<span><input type="radio" name="radio"  class="second" value="a2(3)"  /> Reykjavic.</span>
<span><input type="radio" name="radio" class="second"  value="a2(4)"  /> Brussels. </span>
<div class="button_box">
   <button class="back">Back</button>
   <button class="next">Next</button>
</div>
   </div>

<div class="next-div" style="display:none;">
    <p>Question3: Where in the world would you find the Colosseum?</p> 
<span><input type="radio" name="radio" class="third"  value="a3(1)"  /> Taipei.</span>
<span><input type="radio" name="radio" class="third"  value="a3(2)"  /> Rome. </span>
<span><input type="radio" name="radio"  class="third" value="a3(3)"  /> Reykjavic. </span>
<span><input type="radio" name="radio" class="third" value="a3(4)"  /> Brussels. </span>
<div class="button_box">
   <button class="back">Back</button>
   <button class="next">Next</button>
</div>
</div>
<div class="next-div" style="display:none;">
    <p>Question4: Where in the world would you find the Colosseum?</p> 
<span><input type="radio" name="radio" class="fourth"  value="a4(1)"  /> Taipei. </span>
<span><input type="radio" name="radio" class="fourth"  value="a4(2)"  /> Rome. </span>
<span><input type="radio" name="radio" class="fourth"  value="a4(3)"  /> Reykjavic. </span>
<span><input type="radio" name="radio" class="fourth"  value="a4(4)"  /> Brussels. </span>
<div class="button_box">
    <button class="back">Back</button>
   <button class="finish">Finish</button>
</div>   
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

你能不能运行我最近回答的代码片段。如果您在没有选择任何内容的情况下按下它，则会显示一个警告框，而不是转到下一部分： -

Answer 6

只需使用.checked查看是真还是假

Answer 7

<强>更新
如果您只想检查没有表单的整个文档，可以这样做：

if (!$("input[type=radio]:checked").val()) {
        alert("Please select department");
        return false;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

正如你所看到的，你只需要输入输入无线电组的名称，只需给所有人输入一个简单的名称，然后检查。如果选中，则存储已选中的单选按钮的值，您可以谷歌如何在jquery中存储已检查的单选按钮的值。

更新：不是你可以运行一个循环来检查是否有任何单选按钮被选中。如果选中，那么使用相同的表达式val（）将给出所有已检查的无线电值，将它们推入数组。使用jquery的push（）

Answer 8

如果用户在转到下一个问题之前选择了答案，我认为您正在尝试进行验证。您可以使用：已检查为该特定上下文无线电组检查是否在广播组中选择了一个选项（如果您想拥有相同的组名）。

$('.next').click(function(){

   var context = $(this).parent().parent();
   if($("input[name='radio']",context).is(":checked"))
   context.hide().next().show();//hide parent and show next
   else
   alert("select an answer before moving to next");
});

希望这有帮助。

$('.next').click(function(){
  
   var context = $(this).parent().parent();
   if($("input[name='radio']",context).is(":checked"))
   context.hide().next().show();//hide parent and show next
   else
   alert("select an answer before moving to next");
});

$('.back').click(function(){
   $(this).parent().parent().hide().prev().show();//hide parent and show previous
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-div">
<p>Question1: Where in the world would you find the Spire?</p> 
<span><input type="radio" name="radio"  value="a1"  /> Kerry. </input></span>
<span><input type="radio" name="radio"  value="a1"  /> Galway. </input></span>
<span><input type="radio" name="radio"  value="a1"  /> Dublin. </input></span>
<span><input type="radio" name="radio"  value="a1"  /> Donegal. </input></span>
<div class="button_box">
    <button class="back" disabled="true" style="color:#aaa">Back</button>
   <button class="next">Next</button>
</div>   
</div>

<div class="next-div" style="display:none;">
   <p>Question2: Where in the world would you find the Colosseum?</p> 
<span><input type="radio" name="radio"  value="a2"  /> Taipei. </input></span>
<span><input type="radio" name="radio"  value="a2"  /> Rome. </input></span>
<span><input type="radio" name="radio"  value="a2"  /> Reykjavic. </input></span>
<span><input type="radio" name="radio"  value="a2"  /> Brussels. </input></span>
<div class="button_box">
   <button class="back">Back</button>
   <button class="next">Next</button>
</div>
   </div>

<div class="next-div" style="display:none;">
    <p>Question3: Where in the world would you find the Colosseum?</p> 
<span><input type="radio" name="radio"  value="a3"  /> Taipei. </input></span>
<span><input type="radio" name="radio"  value="a3"  /> Rome. </input></span>
<span><input type="radio" name="radio"  value="a3"  /> Reykjavic. </input></span>
<span><input type="radio" name="radio" value="a3"  /> Brussels. </input></span>
<div class="button_box">
   <button class="back">Back</button>
   <button class="next">Next</button>
</div>
</div>
<div class="next-div" style="display:none;">
    <p>Question4: Where in the world would you find the Colosseum?</p> 
<span><input type="radio" name="radio"  value="a3"  /> Taipei. </input></span>
<span><input type="radio" name="radio"  value="a3"  /> Rome. </input></span>
<span><input type="radio" name="radio"  value="a3"  /> Reykjavic. </input></span>
<span><input type="radio" name="radio"  value="a3"  /> Brussels. </input></span>
<div class="button_box">
    <button class="back">Back</button>
   <button class="finish">Finish</button>
</div>   
</div>

P.S：我从所有使html无效的元素中删除了相同的id属性。

Answer 9

检查这个

var arr = [];
$('#id-next').click( function() {
    if( $('#first input[name=radio]').is(':checked') ) {
    	arr.push( $('#first input[name=radio]:checked').val() );
      alert("Answer : "+$('#first input[name=radio]:checked').val());
    }
    else
      alert("Select Answer");
    
    alert("Array is : "+arr.join(","));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first" class="first-div">
    <p>Question1: Where in the world would you find the Spire?</p> 
    <span>
    <input type="radio" name="radio" id="a10" value="0" /> Kerry. </span>
    <span><input type="radio" name="radio" id="a11" value="1" /> Galway. </span>
    <span><input type="radio" name="radio" id="a12" value="2" /> Dublin. </span>
    <span><input type="radio" name="radio" id="a13" value="3" /> Donegal. </span>
    <div class="button_box">
       <button class="back" disabled="true" style="color:#aaa">Back</button>
       <button class="next" id="id-next">Next</button>
    </div>   
</div>

Answer 10

根据我的理解，您正在寻找验证器。

function validateAnswer() {
  return $('[class$="-div"] :visible')
          .find('input[name="radio"]')
          .is(":checked");
}

Working Demo

也很少有指针

• ID元素必须唯一
• 您应该使用.parent().parent()
而不是.parents(selector)
• 最好在所有问题中使用通用类，然后在验证
上使用$(this).closest('commonClass').nest().show()