Question

您好，我正在为JQuery作业做作业。每次用户单击“提交”按钮并且一个输入部分完成时，焦点突出显示应该从一个输入切换到另一个输入，但是下一个和/或其余部分不显示。

我的问题源于第三输入部分，该部分是单选按钮输入而不是文本输入。用户可以单击两个单选按钮检查圆圈，一个单击为男性，另一个单击为女性，但是尽管单击了“确定”，但只能单击一个按钮，以便从焦点移到下拉列表部分。事实上，html中的两个单选按钮检查圆圈都有一个输入部分。

我的问题是，我该如何编写JQuery代码，使得仅单击其中一个单选按钮（而不是两个）后，焦点将移至下拉列表。我的html和Javascript / Jquery代码如下：

Code:`enter code here`

HTML:

    <form>
        <br>
        <label for="first_name">First Name:</label>
        <input type="text" id="first_name" name="first_name" required> <span class="error" id="first_error"></span>
        <br>
        <label for="last_name">Last Name:</label>
        <input type="text" id="last_name" name="last_name" required> <span class="error" id="last_error"></span>
        <br>
        Male <input type="radio" name="gender" value="M">
        Female <input type="radio" name="gender" value="F"> <span class="error" id="gender_error"></span>
        <br>

Javascript/JQuery

$(document).ready(function() { //document ready function to contain jquery code


$('body').css("background-color", "tan").css("padding-left", "50px");
$('h1').css("font-size", "300%");
$('h3').css("font-size", "200%");
$('input').css("margin", "10px");

var myFirstName = $("#first_name").val();
var myLastName = $("#last_name").val();

$("#first_name").focus();
$("#first_error").text("You must Enter a First Name").hide();
$("#last_error").text("You must Enter a Last Name").hide();

$(".error").css("color", "red");

$("input").change(function() {
  var myFormChange = $(this).closest('form').find(':input');
  myFormChange.eq( myFormChange.index(this) + 1 ).focus();

});

$("#mysubmit").click(function(){




    if (myFirstName == '')
    {
$("#first_error").text("You must Enter a First Name");
    }
    else {
        if (myFirstName !== '')
        {
            $("#first_error").text("");
        }
    }

});

});
// end of "document ready" jquery code.[imageofinputfocus][1]


  [1]: https://i.stack.imgur.com/a2UT6.png

Answer 1

一种方法是检查输入的名称。如果名称相同，则单击两个名称中的第一个单选按钮，然后跳过它。

var nextElement = myFormChange.eq( myFormChange.index(this) + 1 );

if (nextElement.attr('name') === this.name) {
    nextElement = myFormChange.eq( myFormChange.index(this) + 2 );
}

nextElement.focus();

jQuery：焦点从一个单选按钮移到另一个

1 个答案: