Как выбрать элемент по атрибуту name в jQuery

Вы можете использовать селекторы атрибутов CSS для выбора элемента HTML по имени с помощью jQuery. Селекторы атрибутов предоставляют очень гибкий и мощный механизм для выбора элементов.

Давайте посмотрим на следующий пример, чтобы увидеть, как это работает:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by its Name Attribute</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Выбирайте и стилизуйте элементы одним нажатием кнопки
    $("button").click(function(){
        // Выберите input, значение атрибута name которых заканчивается на '_name'
        $('input[name$="_name"]').css("border-color", "lime");
        
        // Выберите input, значение атрибута name которого точно соответствует 'email'
        $('input[name="email"]').css("border-color", "blue");
        
        // Выберите input, значение атрибута name которых начинается с 'zip'
        $('input[name^="zip"]').css("border-color", "red");
    });    
});
</script>
</head>
<body>
    <form>
        <p><label>First Name: <input type="text" name="first_name"></label><p>
        <p><label>Last Name: <input type="text" name="last_name"></label><p>        
        <p><label>Email Address: <input type="text" name="email"></label><p>
        <p><label>Zip Code: <input type="text" name="zip_code"></label><p>
        <button type="button">Style Inputs</button>
    </form>
</body>
</html>

Подробнее см. Руководство по селекторам атрибутов в CSS.

Читайте также

Похожие примеры: