JQuery का उपयोग करके एक div में चेक किए गए चेकबॉक्स की एक सूची प्राप्त करें


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 चयनित = $ ('# चेकबॉक्स इनपुट: चेक किया हुआ')। मैप (फ़ंक्शन (i, el) {return el.name;})। get () // जोड़ .join (';') को संयुक्त स्ट्रिंग प्राप्त करने के लिए
roberkules

1
@ अलेक्स ले। मैं केवल चयनित चेकबॉक्स की गिनती कैसे प्राप्त करूं? मुझे बस यह जांचने की आवश्यकता है कि क्या div के अंदर के किसी भी चेकबॉक्स की जाँच की गई है या नहीं।
आशीषजमश्रम

1
@Ashish। बस लिखें: var count = $ ('# चेकबॉक्स इनपुट: चेक किया हुआ')। लंबाई;
एलेक्स ले

2
कंस्ट्रक्टर की अनावश्यक कॉल var selected = new Array();। बेहतर (सस्ता) के साथvar selected = [];
पोनो

मैं इसे changeफ़ंक्शन पर कैसे प्राप्त करूं ?
Si8

54

क्या ऐसा होगा?

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

9
$ (यह) .checked काम नहीं करता है। अगर ($ (यह) .attr ('चेक')) या यदि ($ (यह) .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 ('नाम');
जिनसेन मूल्य

4
$("#checkboxes :checked").map(...)अधिक संक्षिप्त होगा। जैसा कि जानसन बताते हैं, यह होना चाहिए $(this).attr("name"); लेकिन मैं एक साधारण पर विचार करूंगा this.nameजो कि संगत होना चाहिए।
एलेक्स बैरेट

1
यह सरल मानचित्र के लिए बहुत अच्छा था। मैं गहरी दिखने के childrenलिए बदल गया find, और jquery विशेषताओं का उपयोग करने की आवश्यकता थी $(this) (और जब मैं फिर से देख रहा हूं तो यह टिप्पणी लिखी ...)
goodeye

24

मुझे उन सभी चेकबॉक्सों की गिनती की आवश्यकता थी, जिन्हें चेक किया गया है। लूप लिखने के बजाय मैंने ऐसा किया

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

यह देखने के लिए कि क्या वे समान हैं चेकबॉक्स की कुल संख्या के साथ तुलना करें। आशा है कि यह किसी की मदद करेगा


9

यह मेरे लिए काम करता है।

var selecteditems = [];

$("#Div").find("input:checked").each(function (i, ob) { 
    selecteditems.push($(ob).val());
});

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>

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.