Как выбрать элемент по имени с помощью jQuery?

Question

У меня есть столбец таблицы, который я пытаюсь скрыть и развернуть. jQuery, похоже, скрывает элементы <td>, когда я выбираю их по классу, но не работает при выборе по атрибуту name.

Например:

$(".bold").hide(); // Выбор по классу работает.
$("tcol1").hide(); // Выбор по имени не работает.

Обратите внимание на приведённый ниже HTML. Во втором столбце есть одинаковый атрибут name для всех строк. Как я могу создать эту коллекцию, используя атрибут name?

<tr>
  <td>data1</td>
  <td name="tcol1" class="bold">data2</td>
</tr>
<tr>
  <td>data1</td>
  <td name="tcol1" class="bold">data2</td>
</tr>
<tr>
  <td>data1</td>
  <td name="tcol1" class="bold">data2</td>
</tr>

Answer 1

Вы можете получить значение атрибута name из поля ввода, используя jQuery следующим образом:

var firstname = jQuery("#form1 input[name=firstname]").val(); // Возвращает ABCD
var lastname = jQuery("#form1 input[name=lastname]").val(); // Возвращает XYZ 
console.log(firstname);
console.log(lastname);

Пример кода HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" id="form1">
  <input type="text" name="firstname" value="ABCD"/>
  <input type="text" name="lastname" value="XYZ"/>
</form>

Таким образом, вы можете воспользоваться селектором jQuery для доступа к элементам формы по их атрибуту name и извлечь их значения.

Answer 2

Если у вас есть что-то вроде следующего кода HTML:

<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">

Вы можете считать выбранные значения с помощью следующего кода на jQuery:

jQuery("input[name='mycheckbox']").each(function() {
    console.log( this.value + ":" + this.checked );
});

Этот сниппет переберет все чекбоксы с именем mycheckbox и выведет в консоль их значения и состояния (выбран или нет). Вот полный пример с подключением jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">

При выполнении этого кода в консоли вы увидите:

11:true
12:false

Это указывает на то, что первый чекбокс выбран, а второй — нет.

Answer 3

Вы можете получить массив элементов по имени более традиционным способом и передать этот массив в jQuery.

function toggleByName() {
  var arrChkBox = document.getElementsByName("chName");
  $(arrChkBox).toggle();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>sandBox</title>
  </head>
  <body>
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="button" onclick="toggleByName();" value="toggle"/>
  </body>
</html>

Обратите внимание: использовать атрибут "name" имеет смысл только для элементов ввода типа checkbox или radio.

Лично я бы добавил еще один класс к элементам для выбора. Это более предпочтительный способ.

function toggleByClass(bolShow) {
  if (bolShow) {
    $(".rowToToggle").show();
  } else {
    $(".rowToToggle").hide();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>sandBox</title>
  </head>
  <body>
    <table>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
    </table>
    <input type="button" onclick="toggleByClass(true);" value="show"/>
    <input type="button" onclick="toggleByClass(false);" value="hide"/>
  </body>
</html>

Таким образом, использование классов для выбора элементов более гибко и удобно, чем использование атрибута "name".

Answer 4

Фреймворки обычно используют названия с квадратными скобками в формах, например:

<input name="user[first_name]" />

К таким полям можно получить доступ следующим образом:

// в JS:
this.querySelectorAll('[name="user[first_name]"]')

// в jQuery:
$('[name="user[first_name]"]')

// или с помощью маски с экранированными кавычками:
this.querySelectorAll("[name*=\"[first_name]\"]")

Если у вас есть дополнительные вопросы, не стесняйтесь спрашивать!

Answer 5

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

$('[name="tcol1"]')

Этот селектор jQuery позволяет находить элементы, у которых атрибут name соответствует заданному значению. Вы можете узнать больше о таком селекторе в документации jQuery по ссылке.

Как выбрать элемент по имени с помощью jQuery?

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных