Javascript和HTML填充變量

所以我試圖得到一個HTML單選按鈕時按發送一個值到JavaScript代碼中的變量（UserInput）。Javascript和HTML填充變量

//HTML CODE// 
</HEAD> 
     <script type="text/javascript" src="javascripts/jquery-2.0.3.min.js"></script> 
     <script type="text/javascript" src="javascripts/question.js"></script> 
<BODY> 

<form> 

<INPUT TYPE="radio" NAME="Home" VALUE="1" >Home 
<INPUT TYPE="radio" NAME="School" VALUE="2" >School 
<INPUT TYPE="radio" NAME="Work" VALUE="3" >Work 


<center><input type="button" name="send" value="Submit" onclick="var UserInput=getValue();"></center> 
</form> 


</BODY> 
</HTML>

我想從單選按鈕中獲取值並將它們存儲在變量UserInput中，但它似乎不工作。

// Javascript code (qustion.js) // 

var UserInput = ''; 

if (UserInput=== '3') 
{ 
    confirm("You have selected WORK"); 
    console.log("WORK"); 
} 

else if (UserInput==='2') 
{ 
    confirm("You have selected SCHOOL"); 
    console.log("SCHOOL"); 
} 
else if (UserInput==='1') 
{ 
    confirm("You have selected HOME"); 
    console.log("HOME"); 
} 
else if (UserInput==='') 
{ 
    confirm("You have selected NOTHING"); 
    console.log("NONE"); 
}

謝謝，我也是一個初學者，所以深入的解釋也會很好。

來源

2014-01-14 user36278

哪裏是'的getValue（）'在'question.js'？ –

雖然getValue（）會得到所選單選按鈕的值，但我不確定這是否正確。 – user36278

第一同名屬性設置爲你的收音機上的按鈕調用後創建一個組

<INPUT TYPE="radio" name="optionsRadios" id="Home" VALUE="1" >Home 
<INPUT TYPE="radio" name="optionsRadios" id="School" VALUE="2" >School 
<INPUT TYPE="radio" name="optionsRadios" id="Work" VALUE="3" >Work

功能

<input type="button" name="send" value="Submit" onclick="getValue();">

，並最後創建函數getValue及用途：

document.querySelector("input[name=optionsRadios]:checked").value;

的querySelector返回所有對象名稱爲「optionRadios」和檢查，在這種情況下，只有一個

function getValue(){ 

var UserInput = ''; 
    UserInput= document.querySelector("input[name=optionsRadios]:checked").value; 

if (UserInput=== '3') 
{ 
    confirm("You have selected WORK"); 
    console.log("WORK"); 
} 

else if (UserInput==='2') 
{ 
    confirm("You have selected SCHOOL"); 
    console.log("SCHOOL"); 
} 
else if (UserInput==='1') 
{ 
    confirm("You have selected HOME"); 
    console.log("HOME"); 
} 
else if (UserInput==='') 
{ 
    confirm("You have selected NOTHING"); 
    console.log("NONE"); 
} 

}

例子： http://jsfiddle.net/RrYJu/1/

來源

2014-01-14 06:25:35 kamus

首先你必須使用一個名稱爲人人，使他們一個組（假設這裏的組名myradiogroup），你可以定義不同的標識，並做到這一點：

document.querySelector('input[name=myradiogroup]:checked').value

可以也爲此在你的onclick事件：

<input type="button" name="send" value="Submit" 
    onclick="var UserInput=document.querySelector('input[name=myradiogroup]:checked').value;">

來源

2014-01-14 06:16:42

對不起，但是document.querySelector應該放在onClick =「」中。 – user36278

好的，我更新了答案。 –

var UserInput = ''; 
$(document).ready(function() { 
    $('input:radio').click(function() { 
     if ($(this).is(':checked')) 
      {UserInput =$(this).val();} 
     }); 
}

來源

2014-01-14 06:22:50 sapphireNK

試試這個代碼

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
     <script> 
$(function(){ 
$(document).ready(function(){ 
    $('input[type="radio"]').click(function(){ 
    if ($(this).is(':checked')) 
    { 
     alert($(this).val()); 
    } 
    }); 
}); 
});

來源

2014-01-14 06:25:30

您可以輕鬆地使用jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(function(){ 
    $(".button_classname_here").click(function(){  
     alert($('input[type=radio]:checked').val()); 
    }); 
}); 
</script>

做到這一點

來源

2014-01-14 06:33:44

在Html端做這樣的事情：

</HEAD> 
     <script type="text/javascript" src="javascripts/jquery-2.0.3.min.js"></script> 
     <script type="text/javascript" src="javascripts/question.js"></script> 
<BODY> 

<form> 

<INPUT TYPE="radio" id="Home" VALUE="1" >Home 



<center><input type="button" name="send" value="Submit" onclick="var UserInput=getValue();"></center> 
</form>

和JS側是這樣的：

var UserChoice; 
function getValue(){ 
if ($('input[id = Home]:checked').size() > 0) { 
     UserChoice = "Home"; 
    } 
}

同樣適用於學校和工作

來源

2014-01-14 06:58:17

Javascript和HTML填充變量

回答

相關問題