如果单选按钮被选中或未选中 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
});

- Rex

---

下一个屏幕是什么意思？ - ajbee

哦，第一个块被隐藏了，下一个块被显示了...不用担心这部分...它已经工作了。 - Rex

您多次使用了相同的 id。 - elementzero23

可能是如何使用jQuery选中单选按钮？的重复问题。 - elementzero23

恕我直言，我的问题完全不同，这里什么都不起作用... 这不是一个表单。 - Rex

正如@Frogger所指出的那样，您的问题似乎是检查单选框输入是否被“选中”。无论此元素是否在表单内都与此无关。 - elementzero23

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
  });

这里有一个可用的演示

- Mohammed Elshennawy

---

完美！谢谢。另外，如果我按返回键，如何检索上一个答案？您能否在此更新您的代码...我已经给您点赞了...如何将其标记为您的答案正确？ - Rex

我会在示例中处理它并将其发送给您。请标记为答案。 - Mohammed Elshennawy

你现在能更新一下返回按钮的代码吗？当我按下返回按钮时，答案就会消失。 - Rex

@Henry...是的，我做了...使用映射解决方案的那个...很不错...我还发表了评论...请查看。 - Rex

兄弟，这是更新后的demo，如果你想重新加载旧值，可以在下一个按钮中模拟返回按钮。@Rex（抱歉回复晚了，我正在开会）。 - Mohammed Elshennawy

Answer 2

只需使用地图。这是一个简单的解决方案。希望能帮到你！

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>

- HenryDev

---

太好了，但是如果用户没有勾选任何内容并按下“下一步”，您如何处理客户端验证呢？它应该给出一些错误提示。 - Rex

在你处理客户端验证之后，我会将其标记为答案，因为那是我的主要问题。 - Rex

Answer 3

我为您制作了一段代码，用于验证您的问题。如果用户没有选择任何答案，它将提示他选择任何答案。如果用户选择任何答案，我会警告输入值和与该输入相关的文本，并将这两个值推入一个数组中，您可以在控制台上通过console.log检查。如果有任何问题，请在此处检查我的代码 -> https://jsfiddle.net/Arsh_kalsi01/81bLwLov/1/。

  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
    });

 

     <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>

- Arsh Kalsi

---

这里没有客户端验证处理...当我不选择任何内容时，只需按下“下一步”即可进入下一部分 :-( - Rex

Answer 4

请您运行我最近回答的代码片段。当您在没有选择任何内容的情况下按下“下一步”时，它会弹出一个警告框而不会进入下一部分：

- Arsh Kalsi

Answer 5

使用 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() );
    }
});

- elementzero23

---

再次不起作用了...并且不要多次使用相同的ID...那么它怎么知道哪个被选中了呢？ - Rex

我会更改我的答案，以便至少first-div可以正常工作。 - elementzero23

再次不起作用...可能是因为我们正在检查id＃a1，而在您的HTML中并没有这样的东西。 - Rex

Answer 6

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

- Felix Fong

---

已经尝试了所有方法...我在Stack Overflow上搜索了几个小时...什么都不起作用 :-( - Rex

document.querySelector("checkbox").checked - Felix Fong

还有，如何在检查单选按钮后将值存储在数组中。 - Rex

使用'.value'获取值？但我认为复选框根本不包含任何值？ - Felix Fong

你正在尝试从哪个元素获取值？ - Felix Fong

从单选输入按钮...我已经在那里指定了值...请检查我的HTML代码...<span><input type="radio" name="radio" id="a1" value="a1" /> Kerry. </input></span> 这里的值是a1，同时id也是a1。 - Rex

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>

如您所见，您只需给出输入单选按钮组的名称或为它们全部提供一个简单的名称，然后进行检查。如果已选中，则存储选中的单选按钮的值，您可以在 Google 上搜索如何在 jQuery 中存储选中的单选按钮的值。

更新：现在您可以运行循环以检查单选按钮是否已选中。如果已选中，则使用相同的表达式 val() 将给出所有已选中单选按钮的值，将它们推入数组中，使用 jquery 的 push() 方法。

- Sorangwala Abbasali

---

无法工作...我有ID但没有名称...另外，在检查单选按钮后，如何在此处将值存储在数组中。 - Rex

Answer 8

也检查一下这个

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>

- Shantaram Tupe

Answer 9

以我的理解，您正在寻找一个验证器。

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

工作演示

还有几个指针

• 一个元素的ID必须是唯一的
• 不要使用.parent().parent()，应该使用.parents(selector)
• 最好在所有问题中都有一个公共类，然后在验证时使用$(this).closest('commonClass').nest().show()

- Rajesh

Answer 10

我认为你正在尝试验证用户是否在移动到下一个问题之前选择了答案。你可以使用:checked检查单选按钮组中是否选择了选项（如果你想要相同的组名）。

$('.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>

附言：我已经从所有元素中删除了相同的id属性，这将使HTML无效。

- Deep