jquery सेट चेकबॉक्स चेक किया गया


478

मैंने पहले से ही सभी संभव तरीकों की कोशिश की, लेकिन मुझे अभी भी यह काम नहीं मिला। मेरे पास एक मोडल विंडो है जिसके साथ checkboxमैं चाहता हूं कि जब मोडल खुले, तो checkboxचेक या अनचेक एक डेटाबेस मान पर आधारित होना चाहिए। (मेरे पास पहले से ही दूसरों के साथ काम करने वाले क्षेत्र हैं।) मैंने इसे जांचने की कोशिश शुरू की लेकिन यह काम नहीं आया।

मेरा html div:

<div id="fModal" class="modal" >
    ...
    <div class="row-form">
        <div class="span12">
            <span class="top title">Estado</span>

          <input type="checkbox"  id="estado_cat" class="ibtn">
       </div>
    </div>             
</div>

और jquery:

$("#estado_cat").prop( "checked", true );

मैंने इसके साथ भी प्रयास किया attr, और अन्य लोगों ने यहां मंचों में देखा, लेकिन कोई भी काम नहीं कर रहा था। क्या कोई मुझे सही रास्ता बता सकता है?

संपादित करें: ठीक है, मैं वास्तव में यहाँ कुछ याद कर रहा हूँ ... यदि चेक बॉक्स पृष्ठ में है, तो मैं कोड का उपयोग करके चेक / अनचेक कर सकता हूं, लेकिन यह मोडल विंडो में है, मैं नहीं कर सकता। मैंने दर्जनों तरह से कोशिश की ...

मेरे पास एक लिंक है जो मोडल खोलने वाला है:

और क्लिक को "सुनने" के लिए jquery और डेटाबेस से आने वाले डेटा के साथ कुछ टेक्स्ट बॉक्स भरने जैसे कुछ ऑपरेशन निष्पादित करें। मुझे पसंद है सब कुछ काम करता है, लेकिन समस्या यह है कि मैं चेकबॉक्स का उपयोग करके चेक / अनचेक नहीं कर सकता। कृपया मदद करें!

$(function() {
 $(".editButton").click(function(){
       var id = $(this).data('id'); 
       $.ajax({
          type: "POST",
          url: "process.php",
          dataType:"json",
          data: { id: id, op: "edit" },
        }).done(function( data ) {
//the next two lines work fine, i.e., it grabs the value from database and fills the textboxes
          $("#nome_categoria").val( data['nome_categoria'] );
          $("#descricao_categoria").val( data['descricao_categoria'] );
//then I tried to set the checkbox checked (because its unchecked by default) and it does not work
           $("#estado_cat").prop("checked", true);
        $('#fModal').modal('show');
});
    evt.preventDefault();
    return false;
    });     
});

मोडल खुलने पर किस क्लास को मोडल डिव पर लगाया जाता है इसके अलावा आप डेटाबेस मूल्य की जांच कैसे करते हैं - AJAX का उपयोग करना या यह पहले से ही पूर्व-संग्रहित है और एक चर में संग्रहीत है?
user1428716

मोडल विंडो लोड करने के बाद चेक बॉक्स सेट करें मुझे लगता है कि आप मोडल विंडो लोड करने से पहले चेक बॉक्स सेट कर रहे हैं। $ ( '# fModal') मोडल ( 'शो')। $ ( "# estado_cat") attr ( "जाँच", "जाँच")।;
विनीत भास्करन

जवाबों:


804

आपको 'प्रोप' फ़ंक्शन का उपयोग करना होगा:

.prop('checked', true);

JQuery 1.6 से पहले ( user2063626 का जवाब देखें ):

.attr('checked','checked')

5
आपको सही उत्तर लगता है। क्या आप विस्तृत कर सकते हैं? stackoverflow.com/a/5876747/29182
जिग्गी

1
यह जानकर अच्छा लगता है। JQuery 3.3.x के माइग्रेशन डॉक्यूमेंट के माध्यम से जाने पर इसे
अनदेखा कर दिया गया

1
यह जानकर अच्छा लगा कि आप jQuery के नए संस्करणों में अटारी का उपयोग नहीं कर सकते हैं जैसा कि मैंने शुरू में सोचा था
कालोयान

75

सभी प्रस्तावित उत्तरों को लेना और उन्हें मेरी स्थिति पर लागू करना - सत्य के पुनर्प्राप्त मूल्य के आधार पर चेकबॉक्स को चेक या अनचेक करने की कोशिश करना चाहिए (बॉक्स की जांच करनी चाहिए) या गलत (बॉक्स की जांच नहीं करनी चाहिए) - मैंने उपरोक्त सभी की कोशिश की और का उपयोग कर पाया .prop ("चेक किया गया", सही) और .prop ("चेक किया हुआ", झूठा ) का सही समाधान था।

मैं अभी तक टिप्पणी या उत्तर नहीं जोड़ सकता, लेकिन मुझे लगा कि यह बातचीत में जोड़ने के लिए पर्याप्त महत्वपूर्ण है।

यहां एक फुलकेन्डर संशोधन के लिए लॉन्गहैंड कोड है जो कहता है कि अगर "वैल्यू" ऑलडे "सही है, तो आईडी" even_allday_yn "के साथ चेकबॉक्स की जांच करें:

if (allDay)
{
    $( "#even_allday_yn").prop('checked', true);
}
else
{
    $( "#even_allday_yn").prop('checked', false);
}

48
सिर्फ एक ही लाइन पर क्यों नहीं? $( "#even_allday_yn").prop('checked', allDay);
ज़ेवियर ह्योज़

3
वह संभावित मूल्यों को प्रदर्शित करने की कोशिश कर रहा था। आप इस तरह एक उदाहरण के बिना "allDay" का वास्तविक मूल्य कैसे जानेंगे?
सोरहस फलाहति

1
@Xavier Hayoz यह काम करता है अगर, और केवल अगर, AllDay 'सच' या 'असत्य' को एक लिबरल मान के रूप में लौटाता है - शुद्ध बाइनरी एक नहीं। HTML में चेकबॉक्स बुरी तरह से डिज़ाइन किए गए हैं और उनकी जाँच की गई स्थिति को बहुत अलग तरीके से व्यक्त किया जा सकता है। सुरक्षित और केवल एक ही तरीका मुझे पता है: allDay === 'सच'? $ ('# even_allday_yn) .प्रॉप ("चेक किया गया", सत्य): $ (' # even_allday_yn) .प्रॉप ("चेक किया हुआ", गलत)। सख्त समानता ऑपरेटर को नोटिस करें।
Brice Coustillas

1
$('#even_allday_yn').prop('checked', allDay === true)काम करेगा क्योंकि allDay === trueएक बूलियन परिणाम देता है।
बायीं ओर बांयी ओर

58

कोड के नीचे यार प्रयास करें:

$("div.row-form input[type='checkbox']").attr('checked','checked')

या

$("div.row-form #estado_cat").attr("checked","checked");

या

$("div.row-form #estado_cat").attr("checked",true);

26
KeyOfJ के जवाब में, के .prop('checked', true)बजाय का उपयोग करें attr- मैं सिर्फ एक ही मुद्दे में भाग गया, और propकाम करता है।
सेमलमेलबेल

3
FYI करें यदि आप :checkedछद्म चयनकर्ता या अन्य देशी चेकबॉक्स HTML सुविधाओं का उपयोग करना चाहते हैं, तो आपको अवश्य उपयोग करना चाहिए .prop
बेनास्टैन

1
यह कोशिश की और यह काम नहीं किया, लेकिन जब मैंने कोड को $ में बदल दिया ("div.row-form #estado_cat")। प्रोप ("चेक किया गया", "चेक किया गया"); यह काम किया। (प्रोपर बदला हुआ अटर)।
जिम इवांस

1
दुर्भाग्य से प्रोप jQuery 1.6 और उच्चतर है, इसलिए यदि आप एक विरासत ढांचे में फंस गए हैं जो आपके लिए काम नहीं करेगा
वुल्फ़र-पूर्व

.attr()पुराने संस्करणों के .prop()लिए jQuery 1.6+ के लिए जाने का रास्ता है ।
1922 को vapcguy

26

जैसे ही यह मौजूद हो, "चेक" विशेषता 'चेकबॉक्स को टिक' कर देता है। तो चेकबॉक्स को चेक / अनचेक करने के लिए आपको विशेषता सेट / अनसेट करना होगा।

बॉक्स की जाँच के लिए:

$('#myCheckbox').attr('checked', 'checked');

बॉक्स को अनचेक करने के लिए:

$('#myCheckbox').removeAttr('checked');

जाँच की गई स्थिति के परीक्षण के लिए:

if ($('#myCheckbox').is(':checked'))

आशा है ये मदद करेगा...


19

चूंकि आप एक मोडल विंडो में हैं (चाहे डायनेमिक हो या पेज में) आप अपने लक्ष्य को पूरा करने के लिए निम्न कोड का उपयोग कर सकते हैं: (मैं अपनी साइट पर उसी समस्या में भाग गया और यह मैंने इसे कैसे तय किया)

HTML:

<div class="content-container" style="text-align: right;">
    <input type="checkbox" id="QueryGroupCopyQueries">
    <label for="QueryGroupCopyQueries">Create Copies</label>                                                   
</div>

कोड:

$.each(queriesToAddToGroup, function (index, query) {
    if (query.groupAddType === queriesGroupAddType.COPY) {

        // USE FIND against your dynamic window and PROP to set the value
        // if you are using JQUERY 1.6 or higher.
        $(kendoWindow).find("input#QueryGroupCopyQueries").prop("checked", true);

        return;
    }

उपरोक्त "केन्डोविंडो" मेरी खिड़की है (मेरा गतिशील है, लेकिन मैं यह तब भी करता हूं जब पृष्ठ में सीधे किसी तत्व के लिए अपील करता हूं)। मैं यह देखने के लिए कि किसी पंक्तियों में COPY का गुण है या नहीं, मैं डेटा की एक सरणी के माध्यम से लूप कर रहा हूं ("क्वेरीज़ऑडाउन्टग्रुप")। यदि ऐसा है तो मैं उस विंडो के भीतर चेकबॉक्स को चालू करना चाहता हूं जो उस विशेषता को सेट करता है जब कोई उपयोगकर्ता इस विंडो से बचाता है।


4
यह ध्यान दिया जाना चाहिए कि जब हाथ में प्रश्न के अन्य उत्तर "काम" हो सकते हैं, तो propइस उत्तर का उपयोग गतिशील jQuery के चेकबॉक्स को पूरा करने / अन-चेकिंग का सही तरीका है।
जोशुआ बर्न्स

11
.attr("checked",true)
.attr("checked",false)

काम करेंगे। सुनिश्चित करें कि सही और गलत उद्धरण के अंदर नहीं हैं।


1
Attr चेकबॉक्स की जाँच नहीं करेगा, चेक को करने के लिए प्रोप एक है। .prop('checked', true); इस पोस्ट में अधिक जानकारी की
casivaagustin

@casivaagustin jQuery संस्करण पर निर्भर करता है। मेरा मानना ​​है कि पहले jQuery 1.6 की तुलना में, .attr()काम किया था, जैसा कि वर्णित है।
vapcguy

5

आप निचे दिए गए कोड की तरह लिख सकते हैं।

एचटीएमएल

<input type="checkbox"  id="estado_cat" class="ibtn">

jQuery

$(document).ready(function(){
    $(".ibtn").click(function(){
        $(".ibtn").attr("checked", "checked");
    });
});

आशा है कि यह आपके लिए काम करेगा।


4

यदि आप किसी पृष्ठ पर चेकबॉक्स को स्वचालित रूप से जांचने के लिए एक GreaseMonkey स्क्रिप्ट के लिए इस कार्यक्षमता का उपयोग करना चाहते हैं, तो ध्यान रखें कि केवल चेक की गई संपत्ति को सेट करना संबंधित कार्रवाई को ट्रिगर नहीं कर सकता है। उस स्थिति में, चेकबॉक्स पर "क्लिक करना" संभवत: (साथ ही चेक की गई संपत्ति को सेट करेगा)।

$("#id").click()

3
$("#divParentClip").find("#subclip_checkbox")[0].checked=true;

ढूँढें सरणी वापस आ जाएगी, इसलिए केवल एक आइटम होने पर भी प्राप्त करने के लिए [0] का उपयोग करें

यदि आप उपयोग नहीं पाते हैं तो

$("#subclip_checkbox").checked=true;

यह मेरे लिए मोज़िला फ़ायरफ़ॉक्स में ठीक काम किया


1
यह काम करता है, अन्य सभी समाधानों का पता नहीं चलता है यदि आपके पास: आपकी सीएसएस में जाँच की गई शैली है
19


2

अपने jQuery यूआई का उपयोग कर रहे हैं के बाद से यह कोशिश करो (यदि टिप्पणी कृपया नहीं)

 $("#fModal" ).dialog({
     open: function( event, ui ) {

     if(//some hidden value check which stores the DB value==expected value for
      checking the Checkbox)

         $("div.row-form input[type='checkbox']").attr('checked','checked');

    }
   });

@ user2063626 - फ़ंक्शन के अंदर js का हिस्सा आपके उत्तर से कॉपी किया जाता है
user1428716

2

क्या आपने $("#estado_cat").checkboxradio("refresh")अपने चेकबॉक्स पर चलने की कोशिश की है ?



2

मुझे भी इस समस्या का सामना करना पड़ा।

और यहाँ मेरा पुराना कोड काम नहीं करता है

if(data.access == 'private'){
     Jbookaccess.removeProp("checked") ; 
    //I also have tried : Jbookaccess.removeAttr("checked") ;
 }else{
    Jbookaccess.prop("checked", true)
}

यहाँ मेरा नया कोड है जो अब काम किया गया है:

if(data.access == 'private'){
     Jbookaccess.prop("checked",false) ;
 }else{
    Jbookaccess.prop("checked", true)
}

इसलिए, महत्वपूर्ण बिंदु यह काम करने से पहले है, सुनिश्चित करें कि जाँच की गई संपत्ति मौजूद है और इसे हटाया नहीं गया है।


बहुत सरल:Jbookaccess.prop("checked", data.access != 'private');
लीजियारन

2

इसका कारण यह है कि आप jQuery के नवीनतम संस्करण के साथ होता है attr('checked')रिटर्न 'checked'जबकि prop('checked')रिटर्न true


2
<body>
      <input id="IsActive" name="IsActive" type="checkbox" value="false">
</body>

<script>
    $('#IsActive').change(function () {
         var chk = $("#IsActive")
         var IsChecked = chk[0].checked
         if (IsChecked) {
          chk.attr('checked', 'checked')
         } 
         else {
          chk.removeAttr('checked')                            
         }
          chk.attr('value', IsChecked)
     });
</script>

क्रोम और फ़ायरफ़ॉक्स में यह अच्छा काम करता है
reza akhlaghi

1

मोडल विंडो को लोड करने के बाद चेक बॉक्स को सेट करें। मुझे लगता है कि पेज लोड करने से पहले आप चेक बॉक्स सेट कर रहे हैं।

$('#fModal').modal('show');
$("#estado_cat").attr("checked","checked");

1

मुझे पता है कि यह एक Jquery समाधान के लिए पूछता है, लेकिन मैं सिर्फ इतना कहना चाहता हूं कि सादे जावास्क्रिप्ट में इसे टॉगल करना बहुत आसान है।

var element = document.getElementById("estado_cat");
element.checked = 1;

यह सभी वर्तमान और भविष्य के संस्करणों में काम करेगा।


0
<div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input" name="quiz_answer" id="customSwitch0">
      <label class="custom-control-label" for="customSwitch0"><span class="fa fa-minus fa-lg mt-1"></span></label>
  </div>

आईडी को बढ़ाना और क्रमशः विशेषता के लिए याद रखें। डायनामिक रूप से बूटस्ट्रैप चेक बॉक्स के लिए।

$(document).on('change', '.custom-switch', function(){
    let parent = $(this);
    parent.find('.custom-control-label > span').remove();
    let current_toggle = parent.find('.custom-control-input').attr('id');
    if($('#'+current_toggle+'').prop("checked") == true){
        parent.find('.custom-control-label').append('<span class="fa fa-check fa-lg mt-1"></span>');
    }
    else if($('#'+current_toggle+'').prop("checked") == false){
        parent.find('.custom-control-label').append('<span class="fa fa-minus fa-lg mt-1"></span>');
    }
})
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.