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>

यदि Ajaxid="c_d" द्वारा अपडेट किया गया है , तो altCognito's का कोड काम नहीं करता है। क्या कोई अच्छा उपाय है?

jquery html checkbox

— lanqy
स्रोत

क्या आप एक समय में सभी या एक चाहते थे?

— TStamper

हम किसी दिए गए मूल्य / लेबल के साथ बॉक्स को कैसे 'चेक' कर सकते हैं? "one_name2" कहें?

— अमितद

5

@Amitd $ का उपयोग करें ("इनपुट [नाम = one_name2]")। attr ('चेक किया हुआ', सत्य);

— मार्क शुल्त्स

धन्यवाद है कि अच्छी तरह से काम किया .. रेडियो प्रकार के लिए। 1 वोट अप :)

— अमित

320

यहाँ एक है जो काम करता है ( उदाहरण देखें ):

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

अपडेट करें

कुछ महीनों बाद आईडी आईडी बदलने पर उपरोक्त कार्य को कैसे रखा जाए, इस संबंध में एक अन्य प्रश्न पूछा गया था। खैर, समाधान कुछ सामान्य में CSST का उपयोग करता है और उन परिवर्तनों के लिए DOM की निगरानी के लिए लाइव फ़ंक्शन का उपयोग करने के लिए updateTextArea फ़ंक्शन को मैप करने के लिए उबलता है।

— CGP
स्रोत

2

आह हा! अति उत्कृष्ट। आपने दोनों संभावित परिदृश्यों को ध्यान में रखा है। अच्छा काम सर। ;)

— काइलफ़ारिस

हम किसी दिए गए मूल्य / लेबल के साथ बॉक्स को कैसे 'चेक' कर सकते हैं? "one_name2" कहें?

— अमितद

6

मुझे इस तरह से सामान के लिए मानचित्र का उपयोग करना पसंद है: $ (': चेक किया हुआ', '#c_b'))। नक्शा (फ़ंक्शन (i, cb) {वापसी cb.value}) .get ()। इसके अलावा, यह सिर्फ व्यक्तिगत प्राथमिकता है, लेकिन मुझे पाठ क्षेत्रों को बदलने से मानों को अलग करना होगा, जैसे कुछ: $ (फ़ंक्शन () {$ ('# c_b इनपुट')। क्लिक करें ($ ('# t')। ($ (': check', '#c_b')। मैप (फंक्शन (i, cb) {रिटर्न cb.value}) .get ()); $ ('# c_b इनपुट: फर्स्ट')। ट्रिगरहाइलर (')। क्लिक करें ');});

— ब्रैंडन

$(document).on("click", "#c_b input", updateTextArea);इसके बजाय ajax'y समस्याओं के आसपास का उपयोग करें ।

— गोल्डेंटोआ

1

यकीन नहीं है कि यह सिर्फ आईई (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>

— मोहम्मद अलशेख
स्रोत

मैं बस इस पर ठोकर खाई, जबकि किसी दिए गए नाम के चेक किए गए चेकबॉक्स के सभी मूल्यों को प्राप्त करने का तरीका खोज रहा हूं और यह मेरे लिए दो छोटे मुद्दों के साथ काम करता है। 1) हर बार जब मैं पहले वाले बॉक्स के अलावा किसी अन्य बॉक्स की जांच करता हूं, तो यह पहले वाले चेकमार्क को टॉगल करता है। 2) जब मैं इसे एक सरणी में सेट करने का प्रयास करता हूं ताकि मैं बाद में जानकारी तक पहुंच सकूं, तो यह क्रैश हो जाता है।

— रेवेंड

3

यह ईमानदारी से सबसे अच्छा जवाब है। बहुत आसान। मैं "फ़ंक्शन" और "अलर्ट" को हटा दूंगा क्योंकि कुछ लोगों को भ्रमित करता है, लेकिन कोड सरल है, अच्छी तरह से किया गया है।

— टैमारिस

showSelectedValues रेडियो बटन के समूहों को डिकोड करने के लिए भी काम करता है, जिसका नाम भी एक ही है

— मैथ्यू लॉक

65

आपका प्रश्न काफी अस्पष्ट है लेकिन मुझे लगता है कि यह वही है जो आपको चाहिए:

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

संपादित करें: ओह, ठीक है .. वहाँ तुम जाओ ... तुम HTML से पहले नहीं था। वैसे भी, हाँ, मैंने सोचा था कि आप एक 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(","));

धन्यवाद मोहम्मद अलशेख

— Nic
स्रोत

1

मस्त आदमी ... यह एकमात्र है जो मेरे अजाक्स लूप के लिए काम करता है;) धन्यवाद

— सागिव एसईओ

7

$ भी कर सकते हैं ('इनपुट [नाम = चयन]: चेक किया गया')। नक्शा (फ़ंक्शन () {return this.value;})

— .Array

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

— हरप्रीत भाटिया
स्रोत

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 फ़ंक्शन केवल एक मान लौटाता है यदि इसकी जाँच की जाती है। अन्य सभी तत्वों के लिए, चेक की स्थिति की परवाह किए बिना मान लौटाया जाता है।

— एंडी
स्रोत

यह वास्तव में ठीक काम करता है, बहुत बहुत धन्यवाद ... मैंने सिर्फ "रिटर्न jQuery (यह) .val ();" "सच लौटना है?" क्योंकि यह मेरे मामले में एक चेकबॉक्स है, मुझे यह जानने की ज़रूरत है कि क्या इसकी जाँच की गई है या नहीं .. धन्यवाद!

— TCB13

5

यदि आपको किसी वैरिएबल पर मूल्य बचाने की आवश्यकता होती है, तो यहां एक विकल्प है:

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

(नक्शा) एक सरणी देता है, जो मुझे टेक्स्टारिया में पाठ की तुलना में आसान लगता है)।

— 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 के मान को मान पैरामीटर के साथ सेट नहीं करते हैं - एक टेक्स्टबॉक्स का मूल्य यह भीतर का HTML है। और यदि आप कुछ तत्व का मान निर्धारित करते हैं, तो ब्राउज़र अमूर्त उद्देश्यों के लिए 'वैल ()' विधि का उपयोग करना सामान्य रूप से सबसे अच्छा है।

— काइलफ़ारिस

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

एक बार में कई चेकबॉक्स चेक किए जा सकते हैं।

— काइलफ़ारिस

2

वैसे भी, आपको शायद कुछ इस तरह की आवश्यकता है:

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

यह पृष्ठ पर पहले चेक किए गए चेकबॉक्स का मूल्य प्राप्त करेगा और इसे टेक्स्टारिया में सम्मिलित करेगा 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 के अंत में कोई चिंता नहीं है।

— जीशान
स्रोत

0

मुझे भी इसी तरह की समस्या हुई है और मैंने ऊपर दिए उदाहरणों का उपयोग करके इसे हल किया है:

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

— सैम
स्रोत

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
स्रोत

कई मूल्यों और अनियंत्रित चेकबॉक्स के लिए खाता नहीं है

— रॉब