2012-07-31 22 views
1

我在這裏獲取單選按鈕的值時遇到了一些問題:http://testing.feministbitch.com/index.php/quiz_creator。我有完整的代碼在最底部。我如何獲得這些單選按鈕的值?

當你點擊添加問題時,我做了讓人們可以選擇下列單選按鈕:true/false或多項選擇。

我想要做到這一點:根據他們是否選擇真/假或多項選擇,進一步的單選按鈕或輸入+下拉將降低問題的下面。但我失敗了。請幫幫我 :)。

這裏的問題是,我不知道如何設置var x等於獲得true_false值或multiple_choice值。

我試過了,但是這些都不起作用。

//var x = $("#question_type"+count).value; 
//var x=document.forms["quizquiz"]["question_type" + count].value; 

下面是追加真/假的東西或者多東西基於他們選擇什麼單選按鈕,在我的代碼部分:

if (x=="true_false"){ 
$('#container').append(
'The above statement is '+ '<Input id="true_or_false_' + count + '" type = "Radio" Name ="true_or_false[]" value= "true">' + 'True' + '&nbsp;&nbsp;&nbsp;&nbsp;' 
+ '<Input id="true_or_false_' + count + '" type = "Radio" Name ="true_or_false[]" value= "false">'+ 'False<br /><br/>' 
); 
}else{ 
$('#container').append(
     'A: ' + '<input id="multi_choices_' + count + '" name="multiple_choices[]' + '" type="text" maxlength="300" size="150"/><br />' + 
     'B: ' + '<input id="multi_choices_' + count + '" name="multiple_choices[]' + '" type="text" maxlength="300" size="150"/><br />' + 
     'C: ' + '<input id="multi_choices_' + count + '" name="multiple_choices[]' + '" type="text" maxlength="300" size="150"/><br />' + 
     'D: ' + '<input id="multi_choices_' + count + '" name="multiple_choices[]' + '" type="text" maxlength="300" size="150"/><br />' + '<br />' 
     +'Correct Choice: ' 
     +'<select name="correct_choice[]">' 
     +'<option value="A">A</option>' 
     +'<option value="B">B</option>' 
     +'<option value="C">C</option>' 
     +'<option value="D">D</option>' 
     +'</select>' 
     +'<br /><br />' 
     ); 
} 

下面是完整的代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 

<title>Quiz Creator</title> 
<script type="text/javascript" src="http://testing.feministbitch.com/js/jquery.js"></script> 
<script type="text/javascript"> 
var count = 0; 
$(function(){ 
$('p#add_field').click(function(){ 
count += 1; 
$('#container').append(
'<strong>Question ' + count + '</strong><br />' 
+ 'Question text: ' + '<input id="question_field_' + count + '" name="question_fields[]' + '" type="text" maxlength="300" size="150"/><br />' 
+ '<Input id="question_type_' + count + '" type = "Radio" Name ="questiontype_fields'+count+'[]" value= "true_false">' + 'True/False' + '&nbsp;&nbsp;&nbsp;&nbsp;' 
+ '<Input id="question_type_' + count + '" type = "Radio" Name ="questiontype_fields'+count+'[]" value= "multiple_choice">'+ 'Multiple Choice<br /><br/>' 

); 

//var x = $("#question_type"+count).value; 
var x=document.forms["quizquiz"]["question_type" + count].value; 

var a=3; 
alert(a); 
if (x=="true_false"){ 
$('#container').append(
'The above statement is '+ '<Input id="true_or_false_' + count + '" type = "Radio" Name ="true_or_false[]" value= "true">' + 'True' + '&nbsp;&nbsp;&nbsp;&nbsp;' 
+ '<Input id="true_or_false_' + count + '" type = "Radio" Name ="true_or_false[]" value= "false">'+ 'False<br /><br/>' 
); 
}else{ 
$('#container').append(
     'A: ' + '<input id="multi_choices_' + count + '" name="multiple_choices[]' + '" type="text" maxlength="300" size="150"/><br />' + 
     'B: ' + '<input id="multi_choices_' + count + '" name="multiple_choices[]' + '" type="text" maxlength="300" size="150"/><br />' + 
     'C: ' + '<input id="multi_choices_' + count + '" name="multiple_choices[]' + '" type="text" maxlength="300" size="150"/><br />' + 
     'D: ' + '<input id="multi_choices_' + count + '" name="multiple_choices[]' + '" type="text" maxlength="300" size="150"/><br />' + '<br />' 
     +'Correct Choice: ' 
     +'<select name="correct_choice[]">' 
     +'<option value="A">A</option>' 
     +'<option value="B">B</option>' 
     +'<option value="C">C</option>' 
     +'<option value="D">D</option>' 
     +'</select>' 
     +'<br /><br />' 


     ); 
} 


}); 
}); 
</script> 



</head> 



<body> 



<div id="upload"> 
<h1>Quiz Creator</h1> 


    <?php 

    $attributes = array('name' => 'quizquiz', 'id' => 'quizquiz'); 

    echo form_open_multipart('quiz_creator'); 
    //controller named quiz_creator 

    ?> 
    Quiz Name: <input id="quiz_name" name="quiz_name" type="text" maxlength="100" size="100"/><br /><br /> 
    <?php 

//-------------------------------------------------study guide uploader 
for ($i = 1; $i <= 5; $i++) { 
echo 'Study Guide '.$i.': '. form_upload('studyguide'.$i.'') . "<br />"; 
} 
//-------------------------------------------------study guide uploader 

echo "<br />"; 

?>  


     <div id="container"> 
      <p id="add_field"><a href="#"><span>&raquo; Add a Question</span></a></p> 
     </div> 


    <br /><br /> 


<?php 
echo "<br /><br />"; 
    echo form_submit('upload', 'Upload'); 
    echo form_close(); 
    ?> 


</div> 






</body> 



</html> 
+0

代替'.value'嘗試'.VAL()'。應該看起來像這樣'$('#question_type「+ count:checked')。val();' – Jeemusu 2012-07-31 03:19:41

+2

如果您爲多個'input'標籤使用相同的'id',那麼您的HTML將會失效並且可能會出現嚴重問題。 'name'應該與它們相同,但'id'應該是唯一的。看看jQuery文檔中的第二個例子是否有幫助:[jQuery:checked selector](http://api.jquery的.com /籤選擇器/) – TLS 2012-07-31 03:26:11

回答

2

HTML規範。指出元素的id屬性必須是唯一的。僅使用name屬性就足以將許多不同的選項分組在一起。另外,我不確定爲什麼你採用了這個特定的約定,但id屬性不需要以_字符結尾,也不需要name屬性的值以[]結尾(我不明白爲什麼你會這麼做想要它,因爲它會降低可讀性)。

要訪問這些元素的值,請使用jQuery's .val() method

對於單選按鈕:

var value = $('input:radio[name="true_or_false[]"]:checked','#container').val(); 

對於選擇元素:

var value = $('select[name="correct_choice[]"]','#container').val();