添加驗證，如果單選按鈕沒有選擇

我有以下代碼：添加驗證，如果單選按鈕沒有選擇

<li>1. question 1</li> 
<li> 
    <input type="radio" name="question1" id="sd1" value="1">Strongly Disagree 
    <input type="radio" name="question1" id="d1" value="2">Disagree 
    <input type="radio" name="question1" id="n1" value="3">Neither Agree Nor Disagree 
    <input type="radio" name="question1" id="a1" value="4">Agree 
    <input type="radio" name="question1" id="sa1" value="5">Strongly Agree 
</li> 
<br/><br/> 

<li>2. question 2 </li> 
<li> 
    <input type="radio" name="question2" id="sd2" value="1">Strongly Disagree 
    <input type="radio" name="question2" id="d2" value="2">Disagree 
    <input type="radio" name="question2" id="n2" value="3">Neither Agree Nor Disagree 
    <input type="radio" name="question2" id="a2" value="4">Agree 
    <input type="radio" name="question2" id="sa2" value="5">Strongly Agree 
</li> 
<br/><br/> 

<li>3. question 3</li> 
<li> 
    <input type="radio" name="question3" id="sd3" value="1">Strongly Disagree 
    <input type="radio" name="question3" id="d3" value="2">Disagree 
    <input type="radio" name="question3" id="n3" value="3">Neither Agree Nor Disagree 
    <input type="radio" name="question3" id="a3" value="4">Agree 
    <input type="radio" name="question3" id="sa3" value="5">Strongly Agree 
</li> 
<br/><br/> 

    <input type="submit" value="Submit" name="Submit" id="Submit" />

我有這樣的30個問題。我的要求是用戶必須回答所有30個問題。

我該如何編寫javascript函數，以便向用戶顯示消息，如果他甚至不回答其中一個問題。編輯：

與我的JavaScript的問題我sthis：

if ((thisfrm.question3[0].checked == false) || (thisfrm.question3[1].checked == false) || (thisfrm.question3[2].checked == false) || (thisfrm.question3[3].checked == false) || (thisfrm.question3[4].checked == false)) 
{ 
    alert('Please answer question 1'); 
    return false; 
}

上面的代碼重複循環無每一個問題。即它是爲每個問題寫的。但即使所有的問題都回答，它仍然顯示請回答問題1

來源

2013-10-11 user2822187

，你可以這樣做：http://webforms2.googlecode.com/svn/trunk/testsuite/021.html – kinske

該方法利用的jQuery和檢查未檢查單選按鈕在一組答案

HTML - 一類添加到您的問題<li>

<li>1. question 1</li> 
<li class="option"> 
    <input type="radio" name="question1" id="sd1" value="1">Strongly Disagree 
    <input type="radio" name="question1" id="d1" value="2">Disagree 
    <input type="radio" name="question1" id="n1" value="3">Neither Agree Nor Disagree 
    <input type="radio" name="question1" id="a1" value="4">Agree 
    <input type="radio" name="question1" id="sa1" value="5">Strongly Agree 
</li>

的Javascript

// Delegate submit action 
$(document).on('submit', 'form', function() { 

    var validate = true; 
    var unanswered = new Array(); 

    // Loop through available sets 
    $('.option').each(function() { 
     // Question text 
     var question = $(this).prev(); 
     // Validate 
     if (!$(this).find('input').is(':checked')) { 
      // Didn't validate ... dispaly alert or do something 
      unanswered.push(question.text()); 
      question.css('color', 'red'); // Highlight unanswered question 
      validate = false; 
     } 
    }); 

    if (unanswered.length > 0) { 
     msg = "Please answer the following questions:\n" + unanswered.join('\n'); 
     alert(msg); 
    } 
    return validate; 
});

這裏的示例http://fiddle.jshell.net/6jNpQ/2/

來源

2013-10-11 07:52:49 Mina

Kyra：感謝您的回覆。有沒有一種方法可以爲每個未解決的問題提供單獨的警報消息？例如：如果第一個問題沒有回答，請提醒用戶第一個問題需要回答，等等 – user2822187

@ user2822187請參閱我的更新回答 – Mina

謝謝。這是非常有創意的，讓用戶知道確切的問題。我已經接受你的回答 – user2822187

這樣的事情？

if ($('input[type=radio]:checked').length <= 0) { 
    alert("No radio checked") 
}

或者按名稱做？

if ($('input[name=question1]:checked').length <= 0) { 
    alert("No radio checked") 
}

來源

2013-10-11 07:33:19 Ruddy

您應該使用邏輯運算符&&你的病情

if ((thisfrm.question3[0].checked == false) && 
    (thisfrm.question3[1].checked == false) && 
    (thisfrm.question3[2].checked == false) && 
    (thisfrm.question3[3].checked == false) && 
    (thisfrm.question3[4].checked == false))

來源

2013-10-11 07:35:35

它的工作謝謝！任何方式，我可以把這個循環，以便我不必寫它30個問題？每個的名稱屬性命名爲：question1，question2，question3 ....等等 – user2822187

檢查。而不是驗證每個元素，你可以使用這樣的東西

for(var i = 1 ; i <= 30 ; i++) 
    { 
     var radios = document.getElementsByName('question'+i); 
     var checked = false; 
     for (var j = 0, length = radios.length; j < length; j++) 
     { 

     if (radios[j].checked) 
     { 
      checked = true; 
      break; 
     } 


     } 
     if(!checked) 
     { 
     alert('Please answer question '+i); 
     break; 
     } 
}

來源

2013-10-11 07:40:50 Dilantha

它看起來像你只使用JavaScript。我建議你添加jQuery以使寫作更容易。

總之，只有用javascript你可以試試這個：

var questions = 30; 
var answer_checked = false; 
var one_not_checked = false; 
for (var i = 1; i <= questions; i++) { 
    for (var j=0; j < document.getElementsByName('question'+i).length; j++) { 
     answer_checked = answer_checked || (thisfrm['question'+i][j].checked == true); 
    } 
    one_not_checked = one_not_checked || !answer_checked; 
    answer_checked = false; 
} 

if (one_not_checked) { 
    // your message to the user as one answer is not checked 
}

來源

2013-10-11 07:51:58

這是您的問題的答案。你也可以檢查this。

只要使用此代碼，我已經爲您的代碼編寫它。請參考下面

HTML代碼

<form method="POST" action="/echo/html/?html=;delay=3;"> 
    <ul> 
     <li class="question">1) question 1</li> 
     <li class="answers"> 
      <input type="radio" name="question1" id="11" value="1" />Strongly Disagree 
      <input type="radio" name="question1" id="12" value="2" />Disagree 
      <input type="radio" name="question1" id="13" value="3" />Neither Agree Nor Disagree 
      <input type="radio" name="question1" id="14" value="4" />Agree 
      <input type="radio" name="question1" id="15" value="5" />Strongly Agree 
     </li> 

     <li class="question">2) question 2</li> 
     <li class="answers"> 
      <input type="radio" name="question2" id="21" value="1" />Strongly Disagree 
      <input type="radio" name="question2" id="22" value="2" />Disagree 
      <input type="radio" name="question2" id="23" value="3" />Neither Agree Nor Disagree 
      <input type="radio" name="question2" id="24" value="4" />Agree 
      <input type="radio" name="question2" id="25" value="5" />Strongly Agree 
     </li> 

     <li class="question">3) question 3</li> 
     <li class="answers"> 
      <input type="radio" name="question3" id="31" value="1" />Strongly Disagree 
      <input type="radio" name="question3" id="32" value="2" />Disagree 
      <input type="radio" name="question3" id="33" value="3" />Neither Agree Nor Disagree 
      <input type="radio" name="question3" id="34" value="4" />Agree 
      <input type="radio" name="question3" id="35" value="5" />Strongly Agree 
     </li> 
    </ul> 
    <input type="submit" value="Submit" name="Submit" id="Submit" /> 
</form>

JavaScript代碼

$("form").submit(function() { 
    var allChecked = true; 
    $('li.answers').each(function() { 
     if (!$(':radio', this).is(':checked')) { 
      allChecked = false; 
      return false; 
     } 
    }); 
    if (!allChecked) { 
     alert('Please fill the form completely...'); 
     return false; 
    } else { 
     alert('You have filled the complete form.'); 
    } 
});

來源

2013-10-11 10:43:47

下面的代碼更簡單，乾淨甚至biggners

if (!$("input[name='html_elements']:checked").val()) { 
    alert('Nothing is checked!'); 
} 
else { 
    alert('One of the radio buttons is checked!'); 
}

退房下面這樣F iddle演示

訪問http://jsfiddle.net/creators_guru/DBd79/

來源

2014-05-19 07:42:03

添加驗證，如果單選按鈕沒有選擇

回答

相關問題