Question

能够选择所选单选按钮的值，但无法将其传递到所需的位置，该位置是输入类型的值（id =重定向）。

<label>Transaction Mode</label>
<br>
<input type="radio" name="mode" id="bank" value="Bank" 
onclick="myFunction()"> Direct Bank Transfer 
<br>
<input type="radio" name="mode" id="online" value="Online" 
onclick="myFunction()"> Credit Card / Paypal 
<br>
<input type="radio" name="mode" id="cheque" value="Cheque" 
onclick="myFunction()"> Cheque / Pay Order 
<br>
<input type="radio" name="mode" id="cash" value="Cash" 
onclick="myFunction()"> Cash

<input type=hidden name="redirect" id="redirect" value="">
<script>
 function myFunction() {
$(document).ready(function(){
        $("input[type='radio']").click(function(){
        var x = $("input[name='mode']:checked").val();
        if($(x).val == "Bank"){
        alert("bank.php");
        }
        });
        }); 
        } 
</script>

警报未显示选定的单选值

Answer 1

请考虑对您的代码进行以下更改：

避免在HTML中使用内联事件绑定（即onclick="myFunction()"）。而是将事件绑定委托给JQuery（即，您已经使用.click()处理程序完成了。
您通常会希望避免将.ready()处理程序包装在用户事件调用的函数中。 .ready()处理程序被调用when the DOM of the page can be safely interacted with-用用户触发的函数（即.ready()）将myFunction()处理程序包装起来，使该处理程序的预期触发点回旋。

建议的代码更改如下：

/* Don't enclose this in another function - it is run once page is ready */
$(document).ready(function() {
  $("input[type='radio']").click(function() {

    if ($(this).is(':checked') && 
        $(this).val() === 'Bank') {

      /* If the clicked radio is checked and the value matches 'Bank'
         show alert() */
 
      alert("bank.php");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<label>Transaction Mode</label>
<br>
<!-- remove onclick event bindings -->
<input type="radio" name="mode" id="bank" value="Bank"> Direct Bank Transfer
<br>
<input type="radio" name="mode" id="online" value="Online"> Credit Card / Paypal
<br>
<input type="radio" name="mode" id="cheque" value="Cheque"> Cheque / Pay Order
<br>
<input type="radio" name="mode" id="cash" value="Cash"> Cash


<input type=hidden name="redirect" id="redirect" value="">

希望有帮助！

Answer 2

这样做时，您的x变量中已经具有值（作为字符串）

var x = $("input[name='mode']:checked").val();

因此，只需测试一下是否为=== 'Bank'：

$("input[type='radio']").click(function() {
  var x = $("input[name='mode']:checked").val();
  if (x === "Bank") {
    console.log("bank.php");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Transaction Mode</label>
<br>
<input type="radio" name="mode" id="bank" value="Bank"> Direct Bank Transfer
<br>
<input type="radio" name="mode" id="online" value="Online"> Credit Card / Paypal
<br>
<input type="radio" name="mode" id="cheque" value="Cheque"> Cheque / Pay Order
<br>
<input type="radio" name="mode" id="cash" value="Cash"> Cash


<input type=hidden name="redirect" id="redirect" value="">

可以随意使用标准的DOM方法，不需要像jQuery这样的大库就可以完成这些琐碎的事情：

document.addEventListener('change', ({ target }) => {
  if (!target.name === 'mode') {
    return;
  }
  const val = target.value;
  if (val === 'Bank') {
    console.log("bank.php");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Transaction Mode</label>
<br>
<input type="radio" name="mode" id="bank" value="Bank"> Direct Bank Transfer
<br>
<input type="radio" name="mode" id="online" value="Online"> Credit Card / Paypal
<br>
<input type="radio" name="mode" id="cheque" value="Cheque"> Cheque / Pay Order
<br>
<input type="radio" name="mode" id="cash" value="Cash"> Cash


<input type=hidden name="redirect" id="redirect" value="">

Answer 3

您可以简化逻辑并将简单的.php附加到单击的单选按钮的值上（根据定义，该单选按钮表示已选中）。这将为您提供所需的页面URL，以用于该选中的单选输入。

我还将那个redirectLocation传递给您的隐藏输入的值，我认为这是这样做的目的。

以更好的代码的名义-ou应该在标签元素中包含每个单选按钮的文本，该标签元素可以包装单选输入或使用for =“ id”属性对其进行引用。

$(document).ready(function(){

   $("input[type='radio']").click(function(){
     var redirectLocation = $(this).val().toLowerCase() + '.php';
     $('#redirect').val(redirectLocation);
     alert(redirectLocation);
   }); 
   
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Transaction Mode</label>
<br>
<input type="radio" name="mode" id="bank" value="Bank"> Direct Bank Transfer 
<br>
<input type="radio" name="mode" id="online" value="Online"> Credit Card / Paypal 
<br>
<input type="radio" name="mode" id="cheque" value="Cheque"> Cheque / Pay Order 
<br>
<input type="radio" name="mode" id="cash" value="Cash"> Cash

<input type=hidden name="redirect" id="redirect" value="">

jQuery，用于设置具有选定单选值的输入类型的值

3 个答案: