input target berdasarkan jenis dan nama (pemilih)

132

Saya perlu mengubah beberapa input kotak centang menjadi input tersembunyi untuk beberapa tetapi tidak semua input pada halaman. 

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

Kode jquery di bawah ini hanya memilih input berdasarkan jenis yang menyebabkan semua kotak centang berubah menjadi input tersembunyi. Apakah ada cara untuk memeriksa kedua jenis input = "kotak centang" dan nama = "ProductCode" sebagai pemilih sehingga saya dapat secara khusus menargetkan mereka yang ingin saya ubah? 

$("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 pengguna357034
sumber

Jawaban:

285

Anda ingin pemilih atribut berganda

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

atau

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

Akan lebih baik untuk menggunakan kelas CSS untuk mengidentifikasi mereka yang ingin Anda pilih karena banyak browser modern menerapkan document.getElementsByClassNamemetode yang akan digunakan untuk memilih elemen dan lebih cepat daripada memilih dengan nameatribut.

Russ Cam
sumber
Keduanya bekerja untuk saya tetapi saya menggunakan metode kedua. THX, saya punya pertanyaan lain tetapi saya akan membuat pertanyaan baru.
user357034
22

Anda dapat menggabungkan penyeleksi atribut dengan cara ini:

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

sehingga suatu elemen harus memenuhi kedua kondisi tersebut. Tentu saja Anda dapat menggunakan ini untuk lebih dari dua. Juga, jangan lakukan [type=checkbox]. jQuery memiliki pemilih untuk itu, yaitu :checkboxsehingga hasil akhirnya adalah:

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

Namun, penyeleksi atribut lambat sehingga pendekatan yang disarankan adalah menggunakan ID dan penyeleksi kelas jika memungkinkan. Anda dapat mengubah markup ke:

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

memungkinkan Anda untuk menggunakan banyak pemilih lebih cepat dari:

$("input.ProductCode")...
cletus
sumber
Jelas ini bekerja juga, tetapi saya hanya bisa memberikan satu orang pujian untuk jawaban yang benar. :) Satu hal yang saya pikirkan adalah saya tidak dapat menargetkan berdasarkan kelas karena saya tidak memiliki akses ke markup kecuali saya menambahkan kelas dan apa gunanya. Tapi terima kasih !!!
user357034
6 
input[type='checkbox', name='ProductCode']

Itu cara CSS dan saya hampir yakin itu akan bekerja di jQuery.

Dani
sumber