Question

我正在尝试更改html表单的操作，具体取决于选中哪个单选按钮。我正在尝试使用jquery来做到这一点。我有一些代码，可以＆＃39;弄清楚它为什么不起作用。有人可以帮我解决这个问题。

HTML：

<form name=loginForm id='login' action='' method='post'>
      <legend>Login</legend>
      <input type='text' name='email' maxlength="100" placeholder="Email"/>
      <input type='password' name='password' maxlength="100" placeholder="password"/>
      <div class="checkBoxGroup">
        <label for="Employer">Employer</label>
        <input type="radio" name="status" id='employer' value="employer">
      </div>
      <div class="checkBoxGroup">
        <label for="Staff">Staff</label>
        <input type="radio" name="status" id='staff' value="staff">
      </div>
      <input type='submit' name='Submit' value='Login' />
    </form>

使用Javascript：

$(document).ready(function(){
  $("input[name='status']").change(function(){
    if($("#employer").prop("checked", true)){
      $("#login").attr("action", "DB/employerVerification.php")
    }
    else{
      $("#login").attr("action", "DB/userVerfification.php")
    }
  }

Answer 1

if($("#employer").prop("checked", true)){将始终返回true，因为您已将该属性设置为checked。您想要测试if($("#employer").prop("checked") == true){。

＆＃13;

$(document).ready(function(){
  $("input[name='status']").change(function(){
    if($("#employer").prop("checked") == true){
      $("#login").attr("action", "DB/employerVerification.php")
    }
    else{
      $("#login").attr("action", "DB/userVerfification.php")
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name=loginForm id='login' action='' method='post'>
      <legend>Login</legend>
      <input type='text' name='email' maxlength="100" placeholder="Email"/>
      <input type='password' name='password' maxlength="100" placeholder="password"/>
      <div class="checkBoxGroup">
        <label for="Employer">Employer</label>
        <input type="radio" name="status" id='employer' value="employer">
      </div>
      <div class="checkBoxGroup">
        <label for="Staff">Staff</label>
        <input type="radio" name="status" id='staff' value="staff">
      </div>
      <input type='submit' name='Submit' value='Login' />
    </form>

＆＃13;

Answer 2

代码中的注释解释错误

The jsfiddle

$(document).ready(function(){
  $("input[name='status']").change(function(){
    //if($("#employer").prop("checked", true)){ <--- wrong / this set the property !
    if($("#employer").prop("checked")){ // <--- this check the property
      $("#login").attr("action", "DB/employerVerification.php")
    }
    else{
      $("#login").attr("action", "DB/userVerfification.php")
    }
    alert($("#login").attr("action"));

  }); // missing parentheses

}); // missing parentheses

Answer 3

使用$('#employer').is(":checked")

请参阅下面的小提琴以供参考 https://jsfiddle.net/ganesh2412/4kt0f1bh/

Answer 4

以下是动态更改操作的方法：

查看：

 private static List<string> Search(string[] studentName, int[] studentGrade, int grade) {
   List<string> result = new List<string>();

   // Let's use good old for loop instead of Linq
   for (int i = 0; i < studentGrade.Length; ++i)
     if (studentGrade[i] == grade)
       result.Add(studentName[i]);

   return result; 
 }

 public static void ShowResults(int userInput) {
   Console.WriteLine();
   Console.WriteLine("The following students have that grade: ");
   Console.WriteLine();

   List<string> list = Search(studentGrade, studentName, userInput); 

   if (list.Count <= 0)
     Console.WriteLine("{0} is NOT in array", userInput);
   else
     Console.WriteLine("{0} {1}", string.Join(", ", list), userInput);
}

控制器/型号：

@model Testy20161006.Controllers.theModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index57</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#setAction").click(function () {
                //credit to http://stackoverflow.com/questions/5451600/jquery-to-change-form-action
                if ($('input[name=changeAction]:checked').val() == "true") {
                    $("form").attr('action', 'ChangedAction');
                }
            })
        })
    </script>
</head>
<body>
    <div>
        @using (Html.BeginForm("Index57", "Home", FormMethod.Post))
        {
            //make sure N in Name is capital so it overrites the name property
            @Html.RadioButtonFor(model => model.ChangedAction, "true", new { Name = "changeAction" })
            <span>ChangedAction</span>
            @Html.RadioButtonFor(model => model.ChangedAction, "false", new { Name = "changeAction" })
            <span>NoActionChanged</span>
            <input type="button" id="setAction" value="set Action" />
            <input type="submit" id="theBtn" value="submit" />
        }
    </div>
</body>
</html>

根据单选按钮更改表单操作

4 个答案: