2016-09-19 36 views
1

我想根据用户选择显示单选按钮值,但警报时我没有获取值。 我也想作为图像来显示单选按钮的值..像当用户选择男男然后PIC显示检索图像中选定的单选按钮值

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
<form id="test"> 
<h4>Gender</h4> 
    <input type="radio" name="gender" value="male"> Male<br> 
    <input type="radio" name="gender" value="female"> Female<br> 
    <h4>Occupation</h4> 
    <input type="radio" name="occupation" value="PvtJob">Pvt. Job<br> 
    <input type="radio" name="occupation" value="Govt">Govt. Employee<br> 
    <h4>Loan Type</h4> 
    <input type="radio" name="loan" value="Personal">Personal Loan<br> 
    <input type="radio" name="loan" value="Health">Health Loan<br><br> 
<button class="btn btn-primary pull-right place-order-button" name="submit" value="submit" onclick="return myFunction()" type="submit" >Finish</button> 
</form> 
</body> 
<script type="text/javascript"> 
    function myFunction() { 
     var radioButtons =["gender","occupation","loan"]; 

     for(var x = 0; x < radioButtons.length; x ++) { 
      if ($('input[name = "'+radioButtons[x]+'"]:checked','#test').val()) { 
       alert("You checked " + $('input[name = "'+radioButtons[x]+'"]:checked','#test').attr('id')); 
       alert("Value is " + $('input[name = "'+radioButtons[x]+'"]:checked','#test').val()); 
     } 
    } 
} 
</script> 
</html> 
+0

这是需要在单击按钮或单选按钮,单击? – Samir

+0

如果情况不正确,我认为你。 – Samir

+0

你需要添加引用jQuery库 – Satpal

回答

0

在代码中包括jQuery和有鼻涕属性,在输入提到的id。您的代码中也没有诸如测试等id。 您也不需要再次重复选择器,您可以简单使用$(this)

请尝试下面的代码片段。

function myFunction() { 
 
     var radioButtons =["gender","occupation","loan"]; 
 

 
     for(var x = 0; x < radioButtons.length; x ++) { 
 
      if ($('input[name = "'+radioButtons[x]+'"]:checked').val()) { 
 
       alert("Value is " + $(this).val()); 
 
     } 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
<form id="test"> 
 
<h4>Gender</h4> 
 
    <input type="radio" name="gender" value="male"> Male<br> 
 
    <input type="radio" name="gender" value="female"> Female<br> 
 
    <h4>Occupation</h4> 
 
    <input type="radio" name="occupation" value="PvtJob">Pvt. Job<br> 
 
    <input type="radio" name="occupation" value="Govt">Govt. Employee<br> 
 
    <h4>Loan Type</h4> 
 
    <input type="radio" name="loan" value="Personal">Personal Loan<br> 
 
    <input type="radio" name="loan" value="Health">Health Loan<br><br> 
 
<button class="btn btn-primary pull-right place-order-button" name="submit" value="submit" onclick="return myFunction()" type="submit" >Finish</button> 
 
</form> 
 
</body>

0

由于您使用jQuery的功能,你需要在你的头添加jQuery库。请以标题部分添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

,并尝试

0

您可以使用length proprty对象的检查所选元素。还在您的HTML页面中添加jQuery库路径

function myFunction() { 
 
     var radioButtons =["gender","occupation","loan"]; 
 

 
     for(var x = 0; x < radioButtons.length; x ++) { 
 
      selected=$('input[name = "'+radioButtons[x]+'"]:checked','#test'); 
 
      if (selected.length>0) { 
 
       
 
       alert(radioButtons[x] + ":: Value is " + selected.val()); 
 
     } 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<form id="test"> 
 
<h4>Gender</h4> 
 
    <input type="radio" name="gender" value="male" id=""> Male<br> 
 
    <input type="radio" name="gender" value="female"> Female<br> 
 
    <h4>Occupation</h4> 
 
    <input type="radio" name="occupation" value="PvtJob">Pvt. Job<br> 
 
    <input type="radio" name="occupation" value="Govt">Govt. Employee<br> 
 
    <h4>Loan Type</h4> 
 
    <input type="radio" name="loan" value="Personal">Personal Loan<br> 
 
    <input type="radio" name="loan" value="Health">Health Loan<br><br> 
 
<button class="btn btn-primary pull-right place-order-button" name="submit" value="submit" onclick="return myFunction()" type="submit" >Finish</button> 
 
</form>

+0

你正在正确的方式..但我想显示选定的值作为像选择男性的div中的图像,然后显示男性图片不男性..提前感谢。 –

+0

你可以把你的HTML代码显示图像吗? –

+0

我试过但无法将值作为图像提取 –