อินพุตเป้าหมายตามประเภทและชื่อ (ตัวเลือก)


136

ฉันต้องการเปลี่ยนอินพุตช่องทำเครื่องหมายเป็นอินพุตที่ซ่อนอยู่สำหรับอินพุตบางส่วน แต่ไม่ใช่อินพุตทั้งหมดในเพจ

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

โค้ด jquery ด้านล่างจะเลือกเฉพาะอินพุตตามประเภทซึ่งทำให้กล่องกาเครื่องหมายทั้งหมดเปลี่ยนเป็นอินพุตที่ซ่อนอยู่มีวิธีตรวจสอบทั้งประเภทอินพุต = "ช่องทำเครื่องหมาย" และชื่อ = "รหัสผลิตภัณฑ์" เป็นตัวเลือกเพื่อให้ฉันสามารถกำหนดเป้าหมายโดยเฉพาะ ที่ฉันต้องการเปลี่ยนแปลง?

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

คำตอบ:


290

คุณต้องการตัวเลือกแอตทริบิวต์หลายรายการ

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

ตัวเลือกแอตทริบิวต์ช้าอย่างไรก็ตามแนวทางที่แนะนำคือใช้ ID และตัวเลือกคลาสหากเป็นไปได้ คุณสามารถเปลี่ยนมาร์กอัปของคุณเป็น:

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

เห็นได้ชัดว่ามันใช้งานได้ดี แต่ฉันสามารถให้เครดิตคนเดียวสำหรับคำตอบที่ถูกต้อง :) สิ่งหนึ่งที่คิดคือฉันไม่สามารถกำหนดเป้าหมายตามชั้นเรียนได้เพราะฉันไม่สามารถเข้าถึงมาร์กอัปได้เว้นแต่ฉันจะเพิ่มชั้นเรียนและจุดใดที่จะทำให้ แต่ Thx !!!
user357034

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

นั่นเป็นวิธี CSS และฉันเกือบแน่ใจว่ามันจะทำงานใน jQuery

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.