JQuery：焦点从一个单选检查按钮转移到另一个答案

【问题标题】：JQuery: Focus shifts from one radio check button to anotherJQuery：焦点从一个单选检查按钮转移到另一个
【发布时间】：2019-04-16 07:26:03
【问题描述】：

您好，我正在为 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

【问题讨论】：

标签： jquery radio-button focus

【解决方案1】：

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

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

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

nextElement.focus();

【讨论】：