целевой ввод по типу и имени (селектор)

133

Мне нужно изменить некоторые входы флажков на скрытые входы для некоторых, но не всех входов на странице.

<input type="checkbox" name="ProductCode"value="396P4"> 
<input type="checkbox" name="ProductCode"value="401P4"> 
<input type="checkbox" name="ProductCode"value="F460129">

Приведенный ниже код jquery выбирает ввод только по типу, что приводит к изменению всех флажков на скрытые вводы. Есть ли способ проверить оба типа input = "checkbox" и name = "ProductCode" в качестве селектора, чтобы я мог специально нацелить их что я хочу изменить?

$("input[type='checkbox']").each(function(){
var name = $(this).attr('name'); // grab name of original
var value = $(this).attr('value'); // grab value of original
var html = '<input type="hidden" name="'+name+'" value="'+value+'" />';
$(this).after(html).remove(); // add new, then remove original input
});

user357034
источник

Ответы:

286

Вам нужен селектор с несколькими атрибутами

$("input[type='checkbox'][name='ProductCode']").each(function(){ ...

или

$("input:checkbox[name='ProductCode']").each(function(){ ...

Было бы лучше использовать класс CSS для идентификации тех, которые вы хотите выбрать, однако, поскольку многие современные браузеры реализуют document.getElementsByClassNameметод, который будет использоваться для выбора элементов и будет намного быстрее, чем выбор по nameатрибуту

Русь Кэм
источник
Оба сработали для меня, но я использовал второй метод. THX, у меня есть еще вопрос, но я задам новый вопрос.
user357034
22

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

$("[attr1=val][attr2=val]")...

так что элемент должен удовлетворять обоим условиям. Конечно, вы можете использовать это более чем для двух. Кроме того, не делай [type=checkbox]. jQuery имеет для этого селектор, а именно :checkboxпоэтому конечный результат:

$("input:checkbox[name=ProductCode]")...

Однако селекторы атрибутов работают медленно, поэтому рекомендуется использовать селекторы идентификаторов и классов, где это возможно. Вы можете изменить свою разметку на:

<input type="checkbox" class="ProductCode" name="ProductCode"value="396P4"> 
<input type="checkbox" class="ProductCode" name="ProductCode"value="401P4"> 
<input type="checkbox" class="ProductCode" name="ProductCode"value="F460129">

что позволяет использовать гораздо более быстрый селектор:

$("input.ProductCode")...
Клетус
источник
Очевидно, это тоже работает, но я могу отдать должное только одному человеку за правильный ответ. :) Я подумал, что я не могу настроить таргетинг по классу, потому что у меня нет доступа к разметке, если я не добавлю класс и какой смысл это будет иметь. Но спасибо !!!
user357034
6
input[type='checkbox', name='ProductCode']

Это способ CSS, и я почти уверен, что он будет работать в jQuery.

Дани
источник