JQuery：焦点从一个单选复选按钮转移到另一个

Question

你好，我正在做 JQuery 作业的作业。每次用户单击提交按钮时，焦点突出显示应该从一个输入转移到另一个输入，并且一个输入部分已完成，但下一个 and/or 其余部分不会。

我的问题源于第三个输入部分，它是单选按钮输入而不是文本输入。有两个单选按钮检查圆圈供用户单击，一个用于男性，另一个用于女性，但他们只应该单击一个以便从焦点转移到下拉列表部分，尽管事实上，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：焦点从一个单选复选按钮转移到另一个

JQuery: Focus shifts from one radio check button to another

jquery

focus

radio-button