รับรายการช่องทำเครื่องหมายที่เลือกไว้ใน div โดยใช้ jQuery


231

ฉันต้องการรับรายชื่อกล่องกาเครื่องหมายที่เลือกไว้ใน div ด้วยรหัสที่แน่นอน ฉันจะทำสิ่งนั้นโดยใช้ jQuery ได้อย่างไร

เช่นสำหรับ div นี้ฉันต้องการรับอาร์เรย์ ["c_n_0"; "c_n_3"] หรือสตริง "c_n_0; c_n_3"

<div id="checkboxes">
    <input id="chkbx_0" type="checkbox" name="c_n_0" checked="checked" />Option 1
    <input id="chkbx_1" type="checkbox" name="c_n_1" />Option 2
    <input id="chkbx_2" type="checkbox" name="c_n_2" />Option 3
    <input id="chkbx_3" type="checkbox" name="c_n_3" checked="checked" />Option 4
</div>

คำตอบ:


434

การรวมกันของสองคำตอบก่อนหน้านี้:

var selected = [];
$('#checkboxes input:checked').each(function() {
    selected.push($(this).attr('name'));
});

10
และคอมโบอื่น: var select = $ ('# ช่องทำเครื่องหมายอินพุต: ถูกตรวจสอบ') แผนที่ (ฟังก์ชั่น (i, el) {return el.name;}). get (); // เพิ่ม. join (';') เพื่อรับสตริงรวม
roberkules

1
@Alex LE ฉันจะได้รับเพียงจำนวนของช่องทำเครื่องหมายที่เลือกได้อย่างไร ฉันแค่ต้องตรวจสอบว่ามีช่องทำเครื่องหมายใด ๆ ใน div ถูกตรวจสอบหรือไม่
ashishjmeshram

1
@Ashish เพียงแค่เขียน: var count = $ ('# ช่องทำเครื่องหมายอินพุต: ตรวจสอบแล้ว') ความยาว;
Alex LE

2
var selected = new Array();โทรที่ไม่จำเป็นของคอนสตรัค ดีกว่า (ถูกกว่า) กับvar selected = [];
Pono

ฉันจะนำไปchangeใช้งานได้อย่างไร
Si8

54

สิ่งนี้จะทำอย่างไร

var selected = [];
$('div#checkboxes input[type=checkbox]').each(function() {
   if ($(this).is(":checked")) {
       selected.push($(this).attr('name'));
   }
});

9
$ (สิ่งนี้). ตรวจสอบไม่ทำงาน ใช้ if ($ (this) .attr ('ทำเครื่องหมาย')) หรือ if ($ (this) .is (': ถูกเลือก'))
Stefan Steiger

ถ้า.attr('checked')หรือ.prop('checked')หรือ.is(':checked')ไม่ทำงานลอง.get(0).checked
emfi

37
$("#checkboxes").children("input:checked")

จะทำให้คุณมีองค์ประกอบต่างๆมากมาย หากคุณต้องการชื่อเฉพาะ:

$("#checkboxes").children("input:checked").map(function() {
    return this.name;
});

2
ฉันคิดว่าควรจะส่งคืนชื่อนี้หรือคืน $ (นี่) .attr ('ชื่อ');
ราคา Jansen

4
$("#checkboxes :checked").map(...)จะรัดกุมมากขึ้น แจนเซนชี้ให้เห็นว่ามันควรจะเป็น$(this).attr("name"); แต่ฉันจะพิจารณาง่าย ๆthis.nameซึ่งควรจะเข้ากันได้
Alex Barrett

1
นี่เป็นแผนที่ที่ยอดเยี่ยมมาก ฉันเปลี่ยนchildrenเป็นfindมองลึกลงไปและต้องการคุณสมบัติ jquery เพื่อใช้$(this) (และเขียนความคิดเห็นนี้เมื่อฉันมาดูอีกครั้ง ... )
goodeye

24

ฉันต้องการจำนวนช่องทำเครื่องหมายทั้งหมดที่มีการตรวจสอบ แทนที่จะเขียนลูปฉันก็ทำอย่างนี้

$(".myCheckBoxClass:checked").length;

เปรียบเทียบกับจำนวนทั้งหมดของช่องทำเครื่องหมายเพื่อดูว่าพวกเขาจะเท่ากัน หวังว่ามันจะช่วยใครซักคน



6

คุณสามารถตั้งชื่อเดียวกันทั้งหมดให้กับพวกเขาดังนั้นพวกเขาจึงเป็นอาร์เรย์แต่ให้ค่าที่ต่างกัน:

<div id="checkboxes">
    <input type="checkbox" name="c_n[]" value="c_n_0" checked="checked" />Option 1
    <input type="checkbox" name="c_n[]" value="c_n_1" />Option 2
    <input type="checkbox" name="c_n[]" value="c_n_2" />Option 3
    <input type="checkbox" name="c_n[]" value="c_n_3" checked="checked" />Option 4
</div>

จากนั้นคุณจะได้รับเพียงมูลค่าของการทำเครื่องหมายโดยใช้แผนที่ :

$('#checkboxes input:checked[name="c_n[]"]')
            .map(function () { return $(this).val(); }).get()

0
function listselect() {
                var selected = [];
                $('.SelectPhone').prop('checked', function () {

                    selected.push($(this).val());
                });

                alert(selected.length);
     <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="1" />
         <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="2" />
         <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="3" />
        <button onclick="listselect()">show count</button>

0
 var agencias = [];
 $('#Div input:checked').each(function(index, item){
 agencias.push(item.nextElementSibling.attributes.for.nodeValue);
 });

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