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

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

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

Код jquery ниже выбирает только вход по типу, который заставляет все флажки заменяться на скрытые входы. Есть ли способ проверить как тип ввода = "флажок", так и 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
});

Ответ 1

Вы хотите несколько селекторов атрибутов

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

или

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

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

Ответ 2

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

$("[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")...

Ответ 3

input[type='checkbox', name='ProductCode']

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