วิธีการเรียกคืนค่าช่องทำเครื่องหมายใน jQuery

240

วิธีการใช้jQueryเพื่อรับค่าช่องทำเครื่องหมายที่เลือกและใส่ลงใน textarea ทันที?

เช่นเดียวกับรหัสนี้:

<html>
  <head>
  </head>

  <body>
    <div id="c_b">
      <input type="checkbox" value="one_name" checked>
      <input type="checkbox" value="one_name1">
      <input type="checkbox" value="one_name2">
    </div>  

    <textarea id="t"></textarea>
  </body>
</html>

หากid="c_d"อัปเดตโดยAjax รหัสด้านล่างของ altCognito จะไม่ทำงาน มีวิธีแก้ปัญหาที่ดีหรือไม่?

jquery html checkbox

— lanqy
แหล่งที่มา

คุณต้องการทั้งหมดหรือทีละครั้ง?

— TStamper

เราจะ 'ตรวจสอบ' กล่องที่มีค่า / ป้ายกำกับที่ระบุได้อย่างไร พูดว่า "one_name2"?

— Amitd

5

@Amitd ใช้ $ ("input [name = one_name2]"). attr ('ตรวจสอบแล้ว' จริง);

— Mark Schultheiss

ขอบคุณที่ทำงานได้ดีมาก .. สำหรับประเภทวิทยุ 1 โหวตขึ้น :)

— Amitd

320

นี่คือสิ่งที่ใช้งานได้ ( ดูตัวอย่าง ):

 function updateTextArea() {         
     var allVals = [];
     $('#c_b :checked').each(function() {
       allVals.push($(this).val());
     });
     $('#t').val(allVals);
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

ปรับปรุง

อีกหลายเดือนต่อมามีคำถามอื่นที่เกี่ยวข้องกับวิธีการทำงานด้านบนหาก ID เปลี่ยน ทีนี้วิธีแก้ให้เดือดร้อนลงไปในการทำแผนที่ฟังก์ชั่น updateTextArea เป็นสิ่งทั่วไปที่ใช้คลาส CSS และใช้ฟังก์ชั่นสดเพื่อตรวจสอบ DOM สำหรับการเปลี่ยนแปลงเหล่านั้น

— CGP
แหล่งที่มา

2

อ้า! ยอดเยี่ยม คุณได้พิจารณาถึงสถานการณ์ที่อาจเกิดขึ้นทั้งสอง เก่งมากครับ ;)

— KyleFarris

เราจะ 'ตรวจสอบ' กล่องที่มีค่า / ป้ายกำกับที่ระบุได้อย่างไร พูดว่า "one_name2"?

— Amitd

6

ฉันชอบใช้แผนที่สำหรับสิ่งต่าง ๆ เช่นนี้: $ (': checked', '#c_b'). map (ฟังก์ชั่น (i, cb) {return cb.value}) .get () แต่ฉันต้องการแยกค่าจากการเปลี่ยนพื้นที่ข้อความเช่น: $ (function () {$ ('# c_b input'). คลิก ($ ('# t'). val ($ (': ตรวจสอบแล้ว', '#c_b'). map (ฟังก์ชั่น (i, cb) {return cb.value}) .get ())); $ ('# c_b อินพุต: แรก') triggerHandler (' คลิก ');});

— Brandon

ใช้$(document).on("click", "#c_b input", updateTextArea);แทนเพื่อแก้ไขปัญหา ajax'y

— Goldentoa11

1

ไม่แน่ใจว่าเป็นเพียงใน IE (11) แต่ไม่ควร$('#c_b:checked')(เน้นระยะห่าง) หรือไม่

— AceMark

124

คุณสามารถคืนค่าช่องทำเครื่องหมายที่เลือกทั้งหมดในสตริงที่คั่นด้วยเครื่องหมายจุลภาค สิ่งนี้จะทำให้คุณง่ายขึ้นเมื่อคุณส่งเป็นพารามิเตอร์ไปยัง SQL

นี่คือตัวอย่างที่ส่งคืนค่าช่องทำเครื่องหมายที่เลือกทั้งหมดที่มีชื่อ "chkboxName" ในสตริงที่คั่นด้วยเครื่องหมายจุลภาค

และนี่คือจาวาสคริปต์

function showSelectedValues()
{
  alert($("input[name=chkboxName]:checked").map(
     function () {return this.value;}).get().join(","));
}

นี่คือตัวอย่าง HTML

<html>
  <head>
 </head>
 <body>
  <div>
   <input name="chkboxName" type="checkbox" value="one_name" checked>
   <input name="chkboxName" type="checkbox" value="one_name1">
   <input name="chkboxName" type="checkbox" value="one_name2">
  </div>  
 </body>
 </html>

— Mohamed ElSheikh
แหล่งที่มา

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

— สาธุคุณบับเบิล

3

นี่คือคำตอบที่ดีที่สุดโดยสุจริต ง่ายมาก. ฉันจะลบ "ฟังก์ชั่น" และ "การแจ้งเตือน" ออกเพราะสับสนบางคน แต่รหัสนั้นเรียบง่ายเรียบร้อยดี

— tmarois

showSelectedValues ยังใช้งานได้กับการถอดรหัสกลุ่มของปุ่มตัวเลือกด้วยเช่นกัน

— Matthew Lock

65

คำถามของคุณค่อนข้างคลุมเครือ แต่ฉันคิดว่านี่เป็นสิ่งที่คุณต้องการ:

$(function() { 
    $('input[type="checkbox"]').bind('click',function() {
        if($(this).is(':checked')) {
            $('#some_textarea').html($(this).val());
         }
   });
});

แก้ไข:โอ้ไม่เป็นไร .. คุณไป ... คุณไม่ได้ HTML ก่อนหน้านี้ อย่างไรก็ตามใช่ฉันคิดว่าคุณตั้งใจจะใส่ค่าลงใน textarea เมื่อมันถูกคลิก หากคุณต้องการให้ค่าช่องทำเครื่องหมายที่เลือกไว้ใส่ลงใน textarea (อาจมีเครื่องหมายจุลภาคคั่น) ในการโหลดหน้ามันจะง่ายเหมือน:

$(function() { 
    $('#c_b input[type="checkbox"]:checked').each(function() { 
        $('#t').append(', '+$(this).val());
    });
});

แก้ไข 2เมื่อมีคนทำแล้วคุณยังสามารถทำเช่นนี้เพื่อทางลัดตัวเลือกความยาวที่ฉันเขียน:

$('#c_b :checkbox:checked').each(function() {
    $('#t').append(', '+$(this).val());
});

... ฉันลืมทางลัดทั้งหมดโดยสิ้นเชิง ;)

— KyleFarris
แหล่งที่มา

50

มันทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน:

alert($("input[name=chkboxName]:checked").map(function() {
    return this.value;
}).get().join(","));

ขอบคุณ Mohamed ElSheikh

— นิค
แหล่งที่มา

1

ผู้ชายที่เท่ห์ ... นี่เป็นคนเดียวที่ทำงานให้กับ ajax loop;) ขอบคุณ

— Sagive SEO

7

ยังสามารถ $ ('อินพุต [ชื่อ = การเลือก]: ตรวจสอบแล้ว') แผนที่ (ฟังก์ชั่น () {return this.value;}). toArray ()

— ygaradon

8

ขอบคุณ altCognito โซลูชันของคุณช่วย เราสามารถทำได้โดยใช้ชื่อของช่องทำเครื่องหมาย:

function updateTextArea() {         
   var allVals = [];
   $('[name=chkbox]:checked').each(function() {
      allVals.push($(this).val());
   });
   $('#t').val(allVals)
} 
$(function() { 
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});

— Harpreet Bhatia
แหล่งที่มา

6

ต่อไปนี้อาจเป็นประโยชน์เนื่องจากฉันมาที่นี่เพื่อค้นหาวิธีแก้ไขปัญหาที่แตกต่างกันเล็กน้อย สคริปต์ของฉันจำเป็นต้องวนซ้ำโดยอัตโนมัติผ่านองค์ประกอบการป้อนข้อมูลและต้องคืนค่าของพวกเขา (สำหรับฟังก์ชั่น jQuery.post ()) ปัญหาคือมีช่องทำเครื่องหมายส่งคืนค่าของพวกเขาโดยไม่คำนึงถึงสถานะการตรวจสอบ นี่คือทางออกของฉัน:

jQuery.fn.input_val = function(){

    if(jQuery(this).is("input[type=checkbox]")) {
        if(jQuery(this).is(":checked")) {
            return jQuery(this).val();
        } else {
            return false;
        }
    } else {
        return jQuery(this).val();
    }
};

การใช้งาน:

jQuery(".element").input_val();

หากช่องป้อนข้อมูลที่กำหนดเป็นช่องทำเครื่องหมายฟังก์ชั่น input_val จะส่งกลับค่าเฉพาะในกรณีที่ตรวจสอบ สำหรับองค์ประกอบอื่น ๆ ทั้งหมดค่าจะถูกส่งคืนโดยไม่คำนึงถึงสถานะที่ตรวจสอบ

— แอนดี้
แหล่งที่มา

มันใช้งานได้ดีขอบคุณมาก ... ฉันเพิ่งเปลี่ยน "return jQuery (this) .val ();" ไปที่ "return true;" เพราะมันเป็นช่องทำเครื่องหมายในกรณีของฉันฉันแค่ต้องรู้ว่ามันได้รับการตรวจสอบหรือไม่ .. ขอบคุณ!

— TCB13

5

นี่เป็นทางเลือกในกรณีที่คุณต้องการบันทึกค่าไว้ในตัวแปร:

var _t = $('#c_b :checkbox:checked').map(function() {
    return $(this).val();
});
$('#t').append(_t.join(','));

(map () คืนค่าอาเรย์ซึ่งฉันหาได้ง่ายกว่าตัวหนังสือ textarea)

— pgcd
แหล่งที่มา

3

   $(document).ready(function() {
        $(':checkbox').click(function(){
           var cObj = $(this);
           var cVal = cObj.val();
           var tObj = $('#t');
           var tVal = tObj.val();
           if( cObj.attr("checked")) {
              tVal = tVal + "," + cVal; 
              $('#t').attr("value", tVal);
           } else {
              //TODO remove unchecked value.
           }
        });
    });

1

คุณมีวิธีที่ซับซ้อนเกินไป นอกจากนี้โดยทั่วไปคุณไม่ได้ตั้งค่า textarea ด้วยพารามิเตอร์ value - ค่าของ textbox คือ innerHTML และถ้าคุณต้องกำหนดค่าองค์ประกอบบางอย่างโดยปกติแล้ววิธีที่ดีที่สุดคือใช้วิธี 'val ()' เพื่อจุดประสงค์ในการใช้เบราว์เซอร์

— KyleFarris

3

 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

— Satoru
แหล่งที่มา

2

$("#t").text($("#cb").find(":checked").val())

— mkoryak
แหล่งที่มา

1

หลายช่องสามารถตรวจสอบได้ครั้งละ

— KyleFarris

2

อย่างไรก็ตามคุณอาจต้องการสิ่งนี้:

 var val = $('#c_b :checkbox').is(':checked').val();
 $('#t').val( val );

สิ่งนี้จะได้รับค่าของช่องทำเครื่องหมายที่ถูกตรวจสอบครั้งแรกในหน้าและแทรกลงใน textarea ด้วย id='textarea'ด้วย

โปรดทราบว่าในรหัสตัวอย่างของคุณคุณควรใส่ช่องทำเครื่องหมายในแบบฟอร์ม

— พิมเจอร์เกอร์
แหล่งที่มา

2

สิ่งนี้ผิดisส่งคืนค่าบูลีนค่าบูลีนไม่มีvalวิธี

— ไม่ได้กำหนด

2

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

var checkedCities = $('input[name=city]:checked').map(function() {
    return this.value;
}).get();

แต่เดิมเมืองต่าง ๆ ถูกดึงมาจากฐานข้อมูล MySQL และวนเป็น PHP ในขณะที่วนซ้ำ

while ($data = mysql_fetch_assoc($all_cities)) {
<input class="city" name="city" id="<?php echo $data['city_name']; ?>" type="checkbox" value="<?php echo $data['city_id']; ?>" /><?php echo $data['city_name']; ?><br />
<?php } ?>

ตอนนี้ใช้รหัส jQuery ข้างต้นฉันได้รับค่า city_id ทั้งหมดแล้วส่งกลับไปยังฐานข้อมูลโดยใช้ $ .get (... )

สิ่งนี้ทำให้ชีวิตของฉันง่ายขึ้นตั้งแต่ตอนนี้รหัสนั้นเป็นแบบไดนามิกอย่างสมบูรณ์ ในการเพิ่มเมืองเพิ่มเติมสิ่งที่ฉันต้องทำก็คือเพิ่มเมืองในฐานข้อมูลของฉันและไม่ต้องกังวลกับ PHP หรือ jQuery

— Zeeshan
แหล่งที่มา

0

ฉันมีปัญหาที่คล้ายกันและนี่คือวิธีที่ฉันแก้ไขโดยใช้ตัวอย่างด้านบน:

 $(".ms-drop").click(function () {
        $(function showSelectedValues() {
            alert($(".ms-drop input[type=checkbox]:checked").map(
               function () { return this.value; }).get().join(","));
        });
    });

— sam
แหล่งที่มา

0

ลองอันนี้..

var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
     console.log($(this).val());
     listCheck .push($(this).val());
});
console.log(listCheck);

— sonida
แหล่งที่มา

0

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

$(":checkbox").click(function(){
  $("#id").text(this.value)
})

— duckyflip
แหล่งที่มา

ไม่บัญชีสำหรับค่าหลายค่าและยกเลิกการทำเครื่องหมายในช่อง

— Rob