如果選中單選按鈕或不是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
  });

這是一個工作演示

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

只需使用地圖 。 這是一個簡單的解決方案。 希望能幫助到你！

 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中的數組，您可以在控制台上檢查該值。 如有任何問題請在此處查看我的代碼 - > 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> 

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> 

PS：我從所有使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");
}

工作演示

也很少指點

• 元素的ID 必須是唯一的
• 而不是.parent().parent() ，你應該使用.parents(selector)
• 最好在所有問題上都有一個共同的類，然后在驗證時使用$(this).closest('commonClass').nest().show()