entrada de destino por tipo y nombre (selector)

132

Necesito cambiar algunas entradas de casillas de verificación a entradas ocultas para algunas pero no todas las entradas en una página. 

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

El código jquery a continuación solo selecciona la entrada por tipo, lo que hace que todas las casillas de verificación cambien a entradas ocultas. ¿Hay alguna manera de verificar tanto el tipo de entrada = "casilla de verificación" como el nombre = "Código de producto" como el selector, de modo que pueda apuntar específicamente a esos que quiero cambiar? 

$("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
});

jquery usuario357034
fuente

Respuestas:

285

Desea un selector de atributos múltiples

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

o

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

Sin embargo, sería mejor usar una clase CSS para identificar las que desea seleccionar, ya que muchos de los navegadores modernos implementan el document.getElementsByClassNamemétodo que se utilizará para seleccionar elementos y será mucho más rápido que seleccionar por el nameatributo

Russ Cam
fuente
Ambos funcionaron para mí pero utilicé el segundo método. THX, tengo otra pregunta pero haré una nueva pregunta.
user357034
22

Puede combinar selectores de atributos de esta manera:

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

para que un elemento tenga que satisfacer ambas condiciones. Por supuesto, puedes usar esto para más de dos. Además, no lo hagas [type=checkbox]. jQuery tiene un selector para eso, es decir, :checkboxel resultado final es:

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

Sin embargo, los selectores de atributos son lentos, por lo que el enfoque recomendado es utilizar selectores de ID y clase cuando sea posible. Puede cambiar su marcado a:

<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">

permitiéndole usar el selector mucho más rápido de:

$("input.ProductCode")...
cletus
fuente
Obviamente, esto también funciona, pero solo puedo dar crédito a una persona por la respuesta correcta. :) Una cosa pensada es que no puedo apuntar por clase porque no tengo acceso al marcado a menos que agregue una clase y qué punto haría eso. Pero gracias !!!
user357034
6 
input[type='checkbox', name='ProductCode']

Esa es la forma CSS y estoy casi seguro de que funcionará en jQuery.

Dani
fuente