JQuery में चेकबॉक्स मान प्राप्त करें

532

मुझे jQuery में चेकबॉक्स का मूल्य कैसे मिल सकता है?

— maztt
स्रोत

1059

मूल्य विशेषता का मूल्य पाने के लिए आप कुछ इस तरह से कर सकते हैं:

$("input[type='checkbox']").val();

या यदि आपने इसके लिए एक classया सेट idकिया है, तो आप कर सकते हैं:

$('#check_id').val();
$('.check_class').val();

हालांकि यह वही लौटेगा मान कि इसकी जाँच की गई है या नहीं, यह भ्रामक हो सकता है क्योंकि यह जमा किए गए फॉर्म व्यवहार से अलग है।

यह जाँचने के लिए कि क्या जाँच की गई है या नहीं:

if ($('#check_id').is(":checked"))
{
  // it is checked
}

— सरफराज
स्रोत

3

यदि पृष्ठ पर कई चेकबॉक्स हैं, तो पहला उदाहरण क्या करता है? Btw, यह एक छोटे तरीके से लिखा जा सकता है $("input:checkbox")। साथ ही, क्लास सेलेक्टर में टाइपो भी लगता है ...

— Jawa

1

@ जवा: पहला टाइप सिंटैक्स दिखाने के लिए सिर्फ एक उदाहरण था और उस टाइपो के लिए धन्यवाद।

— सरफराज

136

यदि मैं $($0).val()क्रोम में कोशिश करता हूं , और चेकबॉक्स को अनटिक करता हूं , तो इसका जवाब "चालू" है, हालांकि यह टिक नहीं है। लेकिन $($0).is(":checked")सही मूल्य लौटाता है।

— एड्रियन

2

@Jawa Per api.jquery.com/checkbox-selector [type="checkbox"] की तुलना में आधुनिक ब्राउज़रों में बेहतर प्रदर्शन है :checkbox।

— ट्रूविल

3

मान को सही या गलत $('#check_id').val();पर $('#check_id').is(":checked");वापस करने के लिए बदलें ।

— मैथ्यूस मिरांडा

227

वे 2 तरीके काम कर रहे हैं:

$('#checkbox').prop('checked')
$('#checkbox').is(':checked')(धन्यवाद @mgsloan)

$('#test').click(function() {
    alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
    alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check me: <input id="test" type="checkbox" />

स्निपेट का विस्तार करें

— एलेन टिंबलो
स्रोत

9

.is ('चेक्ड') इसलिए काम नहीं किया क्योंकि यह होना चाहिए। (': चेक किया हुआ')

— mgsloan

आपके उत्तर के लिए धन्यवाद। यह jQuery के प्रोप () फ़ंक्शन

— थॉमस.बेंज

58

इस छोटे से उपाय को आजमाएं:

$("#some_id").attr("checked") ? 1 : 0;

या

$("#some_id").attr("checked") || 0;

— RDK
स्रोत

या !! ($ ("# some_id")। Attr ("चेक"))

— COOLGAMETUBE

34

चेकबॉक्स के मान को पुनः प्राप्त करने का एकमात्र सही तरीका निम्नलिखित है

if ( elem.checked ) 
if ( $( elem ).prop( "checked" ) ) 
if ( $( elem ).is( ":checked" ) )

जैसा कि jQuery की वेबसाइट में आधिकारिक दस्तावेज़ों में बताया गया है। बाकी विधियों का चेकबॉक्स की संपत्ति से कोई लेना-देना नहीं है , वे उस विशेषता की जाँच कर रहे हैं जिसका अर्थ है कि वे चेकबॉक्स की प्रारंभिक स्थिति का परीक्षण कर रहे थे जब इसे लोड किया गया था। तो संक्षेप में:

जब आपके पास तत्व है और आप जानते हैं कि यह एक चेकबॉक्स है, तो आप बस इसकी संपत्ति को पढ़ सकते हैं और इसके लिए आपको jQuery की आवश्यकता नहीं होगी (यानी elem.checked) या आप इसका उपयोग कर सकते हैं$(elem).prop("checked") यदि आप jQuery पर भरोसा करना चाहते तो आप ।
यदि आपको तत्व को पहली बार लोड किए जाने (या डिफ़ॉल्ट मान) को जानने (या तुलना) करने की आवश्यकता है, तो यह करने का सही तरीका है $(elem).is(":checked")।

जवाब भ्रामक हैं, कृपया अपने आप को नीचे देखें:

http://api.jquery.com/prop/

— रजा
स्रोत

.is(":checked")और .prop(":checked")मेरे लिए w / jQuery 1.10.0

— जोश

23

बस चीजों को स्पष्ट करने के लिए:

$('#checkbox_ID').is(":checked")

'सही' या 'असत्य' लौटाएगा

— ग्रेग ए
स्रोत

14

$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();

— नालन मधेश्वरन
स्रोत

काम नहीं करता। चेक किए जाने से पहले आपको एक कॉलम की आवश्यकता हो सकती है: 'चेक किया हुआ'

— उपयोगी 16

9

.val () काम नहीं करता है। 'चेक' की परवाह किए बिना 'रिटर्न'।

— माइकल कोल

11

jQuery(".checkboxClass").click(function(){
        var selectedCountry = new Array();
        var n = jQuery(".checkboxClass:checked").length;
        if (n > 0){
            jQuery(".checkboxClass:checked").each(function(){
                selectedCountry.push($(this).val());
            });
        }
        alert(selectedCountry);
    });

— जसकरन सिंह राजल
स्रोत

10

सरल लेकिन प्रभावी और आपको पता है कि चेकबॉक्स मिल जाएगा:

$("#some_id")[0].checked;

देता है true/false

— केविन शीया
स्रोत

9

//By each()
var testval = [];
 $('.hobbies_class:checked').each(function() {
   testval.push($(this).val());
 });


//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");

 //HTML Code

 <input type="checkbox" value="cricket" name="hobbies[]"  class="hobbies_class">Cricket 
  <input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey

उदाहरण
डेमो

— कमल
स्रोत

5

इस तथ्य के बावजूद कि यह सवाल एक jQuery समाधान के लिए पूछ रहा है, यहां एक शुद्ध जावास्क्रिप्ट उत्तर है क्योंकि किसी ने भी इसका उल्लेख नहीं किया है।

बिना jQuery के:

बस तत्व का चयन करें और checkedसंपत्ति तक पहुंचें (जो एक बूलियन देता है)।

var checkbox = document.querySelector('input[type="checkbox"]');

alert(checkbox.checked);

<input type="checkbox"/>

स्निपेट का विस्तार करें

इस changeघटना को सुनने के लिए एक त्वरित उदाहरण है :

var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function (e) {
    alert(this.checked);
});

<input type="checkbox"/>

स्निपेट का विस्तार करें

चेक किए गए तत्वों का चयन करने के लिए, :checkedछद्म वर्ग का उपयोग करें (input[type="checkbox"]:checked ) का ।

यहां एक उदाहरण है कि चेक inputकिए गए तत्वों पर पुनरावृत्ति होती है और चेक किए गए तत्व के नामों का एक मैप किया गया सरणी देता है।

यहाँ उदाहरण है

var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
    return el.name;
});

console.log(checkedElements);

कोड स्निपेट दिखाएं

var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
    return el.name;
});

console.log(checkedElements);

<div class="parent">
    <input type="checkbox" name="name1" />
    <input type="checkbox" name="name2" />
    <input type="checkbox" name="name3" checked="checked" />
    <input type="checkbox" name="name4" checked="checked" />
    <input type="checkbox" name="name5" />
</div>

स्निपेट का विस्तार करें

— जोश क्रोज़ियर
स्रोत

1

इस सवाल का जवाब नहीं है।

— माइकल कोल

@ मिचेलकोल - मैं सिर्फ सवाल (3 साल बाद) फिर से पढ़ता हूं और ऐसा लग रहा है कि यह वास्तव में सवाल का जवाब देता है, इसलिए स्वतंत्र महसूस करें।

— जोश क्रोज़ियर

1

"मुझे jQuery में चेकबॉक्स का मूल्य कैसे मिल सकता है?" -> "इस तथ्य के बावजूद कि यह सवाल एक jQuery समाधान के लिए पूछ रहा है ... ब्ला ब्ला ब्ला"। यह एक साबुन-बॉक्स उत्तर है, अन्य वास्तविक उत्तरों के तरीके में, और इसीलिए मैंने इसे अस्वीकृत कर दिया।

— माइकल कोल

1

@MichaelCole - पर्याप्त रूप से, प्रतिक्रिया हमेशा सराहना की जाती है। इस उत्तर का मूल आशय यह बताना था कि जब देश में checkedडोम डोम तत्व पर आसानी से पहुँचा जा सकता है तो jQuery को इस तरह के तुच्छ मामलों में टाला जा सकता है । ऐसे लोगों में से कुछ जो सवाल / जवाब खोजते हैं, वे आमतौर पर इस तथ्य से अनजान होते हैं कि कई बार jQuery आवश्यक नहीं है। दूसरे शब्दों में, संकीर्णतावादी लोग इस उत्तर के लिए लक्ष्य जनसांख्यिकीय नहीं हैं।

— जोश क्रॉजियर

2

एक सरणी के रूप में सभी चेक किए गए चेकबॉक्स का मूल्य कैसे प्राप्त करें :

var values = (function() {
                var a = [];
                $(".checkboxes:checked").each(function() {
                    a.push(this.value);
                });
                return a;
            })()

— फ़राज़ केलहिनी
स्रोत

2

चेकबॉक्स में चेकबॉक्स का मान प्राप्त करने के लिए jquery:

var checks = $("input[type='checkbox']:checked"); // returns object of checkeds.

for(var i=0; i<checks.length; i++){
    console.log($(checks[i]).val()); // or do what you want
});

में pure js:

var checks = document.querySelectorAll("input[type='checkbox']:checked");

for(var i=0; i<checks.length; i++){
    console.log(checks[i].value); // or do what you want
});

— ttrasn
स्रोत

0

निम्नलिखित कोड का उपयोग करें:

$('input[name^=CheckBoxInput]').val();

— माइंट थू लविन
स्रोत

0

$('.class[value=3]').prop('checked', true);

— Jacksonit.org
स्रोत

1

सवाल यह पूछ रहा है कि किसी विशेष डिफ़ॉल्ट मान के साथ कुछ जांचने का मूल्य कैसे प्राप्त करें।

— क्वेंटिन

0

सबसे अच्छा तरीका है $('input[name="line"]:checked').val()

और आप चयनित पाठ भी प्राप्त कर सकते हैं $('input[name="line"]:checked').text()

अपने रेडियो बटन इनपुट में मूल्य विशेषता और नाम जोड़ें। सुनिश्चित करें कि सभी इनपुट में एक ही नाम विशेषता है।

<div class="col-8 m-radio-inline">
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="1" checked> Value Text 1
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="2"> Value Text 2
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="3"> Value Text 3
    </label>
</div>

— हिरुल्लाह कांसू
स्रोत

-1

<script type="text/javascript">
$(document).ready(function(){
    $('.laravel').click(function(){
        var val = $(this).is(":checked");
        $('#category').submit();
    });
});

<form action="{{route('directory')}}" method="post" id="category">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input name="category" value="{{$name->id}}"  class="laravel" type="checkbox">{{$name->name}}
                      </form>

— कुलदीप मिश्रा
स्रोत

-1

बरसों से चली आ रही आपाधापी के चलते सिर्फ ध्यान, आज २०१ today का। removeAttr से वंचित हैं, अब और काम नहीं कर रहे हैं!

चेक बॉक्स को चेक या अनचेक करें:

बुरा, किसी काम का नहीं।

   $('#add_user_certificate_checkbox').removeAttr("checked");

   $('#add_user_certificate_checkbox').attr("checked","checked");

इसके बजाय आपको करना चाहिए:

      $('#add_user_certificate_checkbox').prop('checked', true);
      $('#add_user_certificate_checkbox').prop('checked', false);

— hoogw
स्रोत