Javascript 为什么我不能按名称选择表单元素并使用它们的值用jQuery设置变量_Javascript_Jquery_Html

Javascript 为什么我不能按名称选择表单元素并使用它们的值用jQuery设置变量

javascript jquery html

Javascript 为什么我不能按名称选择表单元素并使用它们的值用jQuery设置变量,javascript,jquery,html,Javascript,Jquery,Html,我试图选择一组单选按钮的值，并使用它来设置一个变量。其思想是每次单选按钮更改时，变量都会更改出于某种原因，这似乎不起作用，我也不知道为什么。变量似乎没有从最初定义的“0”更改。按下黄色按钮时，变量应显示在警告框中我已经把我想要达到的目标简化成了一个版本——见下文 <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"><

我试图选择一组单选按钮的值，并使用它来设置一个变量。其思想是每次单选按钮更改时，变量都会更改

出于某种原因，这似乎不起作用，我也不知道为什么。变量似乎没有从最初定义的“0”更改。按下黄色按钮时，变量应显示在警告框中

我已经把我想要达到的目标简化成了一个版本——见下文

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var paytype = 0;

 $("input [name = paytype]").change(function(){
  var paytype = $(this).val();
  });

 $("#button").click(function(){
  alert ( paytype );
  });
 });
</script>

</head>
<body>
<form id="enrolmentform" action="thanks.php">

<input type="radio" name="paytype" id="bacs" value="Bank Transfer" />
<label for="bacs">Bank Payment/BACS Transfer</label>
<input type="radio" name="paytype" id="cheque" value="Cheque" />
<label for="cheque">Cheque</label>
<input type="radio" name="paytype" id="card" value="Card" />
<label for="card">Card</label>

<div style="width:45px; height: 20px; background-color: yellow; border: thin solid black; margin-top: 20px;"><a href="#" id="button">Button</a></div>
</form>

</body>
</html>

非常感谢您的帮助

谢谢

您的工资类型申报两次。您不需要var：

您正在此行中重新定义变量

var paytype = $(this).val();

换成

paytype = $(this).val();

请试试这个

$("input:radio[name='paytype']").change(function(){
 paytype = $(this).val();
});

好了，没有什么小错误

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">            </script>
<script type="text/javascript">
$(document).ready(function(){
 var paytype;

 $("input[name='paytype']").change(function(){
   paytype = $(this).val();
  });

 $("#button").click(function(){
  alert ( paytype );
  });
 });
</script>

</head>
<body>
<form id="enrolmentform" action="thanks.php">

<input type="radio" name="paytype" id="bacs" value="Bank Transfer" />
<label for="bacs">Bank Payment/BACS Transfer</label>
<input type="radio" name="paytype" id="cheque" value="Cheque" />
<label for="cheque">Cheque</label>
<input type="radio" name="paytype" id="card" value="Card" />
<label for="card">Card</label>

<div style="width:45px; height: 20px; background-color: yellow; border: thin solid     black; margin-top: 20px;"><a href="#" id="button">Button</a></div>
</form>

</body>
</html>

这是正确的答案。关键问题是只指定“input”而不是“input:radio”@Chris此解决方案确实有效，但不是因为添加了：radio。它之所以有效，是因为paytype变量没有像其他一些答案所指出的那样在.change函数中重新声明。还值得注意的是：官方不推荐使用jQueryAPI中的radio，它可能在将来的版本中被删除。

$("input:radio[name='paytype']").change(function(){
 paytype = $(this).val();
});

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">            </script>
<script type="text/javascript">
$(document).ready(function(){
 var paytype;

 $("input[name='paytype']").change(function(){
   paytype = $(this).val();
  });

 $("#button").click(function(){
  alert ( paytype );
  });
 });
</script>

</head>
<body>
<form id="enrolmentform" action="thanks.php">

<input type="radio" name="paytype" id="bacs" value="Bank Transfer" />
<label for="bacs">Bank Payment/BACS Transfer</label>
<input type="radio" name="paytype" id="cheque" value="Cheque" />
<label for="cheque">Cheque</label>
<input type="radio" name="paytype" id="card" value="Card" />
<label for="card">Card</label>

<div style="width:45px; height: 20px; background-color: yellow; border: thin solid     black; margin-top: 20px;"><a href="#" id="button">Button</a></div>
</form>

</body>
</html>