jQuery का चेकबॉक्स परिवर्तित करें और ईवेंट पर क्लिक करें

Question

$(document).ready(function() {
  //set initial state.
  $('#textbox1').val($(this).is(':checked'));

  $('#checkbox1').change(function() {
    $('#textbox1').val($(this).is(':checked'));
  });

  $('#checkbox1').click(function() {
    if (!$(this).is(':checked')) {
      return confirm("Are you sure?");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1"/><br />
<input type="text" id="textbox1"/>

यहाँ .change()टेक्स्टबॉक्स मान को चेकबॉक्स स्थिति के साथ अद्यतन करता है। मैं .click()अनचेक पर कार्रवाई की पुष्टि करने के लिए उपयोग करता हूं । यदि उपयोगकर्ता रद्द का चयन करता है, तो चेकमार्क बहाल हो जाता है, लेकिन .change()पुष्टि से पहले आग लग जाती है।

यह चीजों को असंगत स्थिति में छोड़ देता है और चेकबॉक्स की जाँच होने पर टेक्स्टबॉक्स गलत कहता है।

मैं रद्दीकरण से कैसे निपट सकता हूं और चेकबॉक्स का मूल्य चेक स्टेट के अनुरूप रख सकता हूं?

Comments

यह FF और क्रोम में काम करता है और IE 8 में इसका समझाया गया व्यवहार है। इसलिए यह नोट करना महत्वपूर्ण हो सकता है कि आपको किन ब्राउज़र में काम करने की आवश्यकता है और आप किस त्रुटि को देख रहे हैं।

— कासदेगा

यह सबसे अच्छा नहीं है, लेकिन मेरा मानना ​​है कि यह मेरे लिए यहां काम कर रहा है: http://jsfiddle.net/Skooljester/2Xxcn/ ।

— अय्यप

Answer 1

JSField में परीक्षण किया गया है और आप जो पूछ रहे हैं वह करता है। इस दृष्टिकोण से फायरिंग का एक अतिरिक्त लाभ होता है जब एक चेकबॉक्स से जुड़े लेबल पर क्लिक किया जाता है।

अपडेट किया गया उत्तर:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val(this.checked);

    $('#checkbox1').change(function() {
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            $(this).prop("checked", returnVal);
        }
        $('#textbox1').val(this.checked);        
    });
});

मूल उत्तर:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        if($(this).is(":checked")) {
            var returnVal = confirm("Are you sure?");
            $(this).attr("checked", returnVal);
        }
        $('#textbox1').val($(this).is(':checked'));        
    });
});

Comments

बस एक नोट, इसके this.checkedबजाय का उपयोग करने के लिए बहुत तेज है $(this).is(':checked'): jsperf.com/prop-vs-ischecked/5

— डकोटा

@ डकोटा दी, यह बहुत धीमी है, लेकिन हम अभी भी 600k संचालन / सेकंड की बात कर रहे हैं। तो, प्रति मिलीसेकंड 600 बार। मुझे लगता है कि यदि यह आपके वेब पेज पर प्रदर्शन समस्याओं का कारण बनता है, तो आपको अपनी जावास्क्रिप्ट को फिर से विकसित करने की आवश्यकता हो सकती है;) कोड के साथ प्रदर्शन मेट्रिक्स को समझना अच्छा है, हालांकि। धन्यवाद।

— माइक यू

@ माइक: आप के साथ समय से पहले अनुकूलन पर सहमत हैं, लेकिन यह देखते हुए कि this.checkedलिखने के लिए बहुत कम है + देशी जावास्क्रिप्ट, यह वास्तव में सामान्य रूप से उपयोग करने लायक हो सकता है (इसके अलावा ~ 200 से 300 गुना तेज)।

— लेविट

मैं .prop () के बजाय .attr () की सिफारिश करूँगा क्योंकि बाद वाला सभी मामलों में काम नहीं करता है और मेरा मानना ​​है कि jQuery .prop () अब सलाह देते हैं।

— कबड्डी

मुझे लगता है कि [यह] $ ('# textbox1') में है। वैल (यह। चेक किया गया); दस्तावेज़ को संदर्भित करता है। यह $ ('# टेक्स्टबॉक्स 1') होना चाहिए। वैल ($ ('# चेकबॉक्स 1')। (('चेकबॉक्स)');

— युरिन

Answer 2

डेमो

उपयोग mousedown

$('#checkbox1').mousedown(function() {
    if (!$(this).is(':checked')) {
        this.checked = confirm("Are you sure?");
        $(this).trigger("change");
    }
});

Comments

यह जाँच करते समय चेतावनी प्रदर्शित करता है और यह मुझे वास्तव में जाँच करने से रोकता है। यह क्रोम पर है।

— पीएमवीडीबी

@pimvdm के समान। चेक-एक्शन के लिए भी पुष्टि पॉप अप होती है (यह केवल अनचेक के लिए पॉप अप होना चाहिए) और ओके का चयन करने से बॉक्स की जांच नहीं होती है।

— प्रोफेसर चाओस

यह माउस का उपयोग करते समय काम करता है, लेकिन यदि आप इसे कीबोर्ड से जांच रहे हैं तो नहीं।

— 21

@frinux यह काफी सरल है क्योंकि यह एक माउस से संबंधित प्रश्न है। कृपया पूरी तरह से अलग मुद्दों के लिए उनकी प्रासंगिकता के आधार पर उत्तरों को न दें। यदि आपको कीबोर्ड के माध्यम से चेकबॉक्स की जांच के बाद एक संकेतक की स्थिति को ट्रिगर करने में समस्या है, तो कृपया लापरवाही से जवाब देने के बजाय इसके बारे में एक प्रश्न पोस्ट करें।

— जोसेफ मेरीकल

डाउनवोट किया गया क्योंकि मूसडाउन एकमात्र तरीका नहीं है जो उपयोगकर्ता चेकबॉक्स के साथ बातचीत कर सकता है।

— जोनाथन

Answer 3

यदि आप उपयोग करते हैं, तो अधिकांश उत्तर इसे (संभवतः) नहीं पकड़ेंगे <label for="cbId">cb name</label>। इसका मतलब है जब आप लेबल पर क्लिक करते हैं तो यह चेकबॉक्स पर सीधे क्लिक करने के बजाय बॉक्स को चेक करेगा। (बिल्कुल सवाल नहीं है, लेकिन विभिन्न खोज परिणाम यहाँ आते हैं)

<div id="OuterDivOrBody">
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1">Checkbox label</label>
    <br />
    <br />
    The confirm result:
    <input type="text" id="textbox1" />
</div>

जिस स्थिति में आप उपयोग कर सकते हैं:

Earlier versions of jQuery:

$('#OuterDivOrBody').delegate('#checkbox1', 'change', function () {
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

JSFiddle उदाहरण jQuery 1.6.4 के साथ

jQuery 1.7+

$('#checkbox1').on('change', function() { 
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

नवीनतम jQuery 2.x के साथ JSFiddle उदाहरण

• क्लिक करने योग्य चेकबॉक्स लेबल के साथ jsfiddle उदाहरण और html जोड़े गए

Comments

यह #OuterDivOrBody नहीं है। OuterDivOrBody :)

— लॉरेंट

Answer 4

ठीक है .. बस एक सिरदर्द को बचाने के लिए (इसके पिछले आधी रात यहाँ), मैं साथ आ सकता है:

$('#checkbox1').click(function() {
  if (!$(this).is(':checked')) {
    var ans = confirm("Are you sure?");
     $('#textbox1').val(ans);
  }
});

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

Answer 5

मेरे लिए यह बहुत अच्छा काम करता है:

$('#checkboxID').click(function () {
    if ($(this).attr('checked')) {
        alert('is checked');
    } else {
        alert('is not checked');
    }
})

Comments

एक वेब खोज के माध्यम से इस पार आया। आपको 'attr' के बजाय 'Prop' का उपयोग करना चाहिए

— ।

Answer 6

आप यहाँ हैं

एचटीएमएल

<input id="ProductId_a183060c-1030-4037-ae57-0015be92da0e" type="checkbox" value="true">

जावास्क्रिप्ट

<script>
    $(document).ready(function () {

      $('input[id^="ProductId_"]').click(function () {

        if ($(this).prop('checked')) {
           // do what you need here     
           alert("Checked");
        }
        else {
           // do what you need here         
           alert("Unchecked");
        }
      });

  });
</script>

Answer 7

परिवर्तन ईवेंट से छुटकारा पाएं, और इसके बजाय क्लिक इवेंट में टेक्स्टबॉक्स का मान बदलें। पुष्टि के परिणाम को वापस करने के बजाय, इसे एक var में पकड़ें। यदि इसकी सही है, तो मान बदलें। फिर var लौटा दें।

Answer 8

चेकबॉक्स क्लिक और एक ही घटना लूप में मान के लिए जाँच समस्या है।

इसे इस्तेमाल करे:

$('#checkbox1').click(function() {
    var self = this;
    setTimeout(function() {

        if (!self.checked) {
            var ans = confirm("Are you sure?");
            self.checked = ans;
            $('#textbox1').val(ans.toString());
        }
    }, 0);
});

डेमो: http://jsfiddle.net/mrchief/JsUWv/6/

Answer 9

यदि आप iCheck का उपयोग कर रहे हैं Jquery नीचे दिए गए कोड का उपयोग करें

 $("#CheckBoxId").on('ifChanged', function () {
                alert($(this).val());
            });

Answer 10

इसे इस्तेमाल करे

$('#checkbox1').click(function() {
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = sure;
            $('#textbox1').val(sure.toString());
        }
    });

Answer 11

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        $('#textbox1').val($(this).is(':checked'));
    });

    $('#checkbox1').click(function() {
        if (!$(this).is(':checked')) {
            if(!confirm("Are you sure?"))
            {
                $("#checkbox1").prop("checked", true);
                $('#textbox1').val($(this).is(':checked'));
            }
        }
    });
});

Answer 12

// this works on all browsers.

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function(e) {
        this.checked =  $(this).is(":checked") && !!confirm("Are you sure?");
        $('#textbox1').val(this.checked);
        return true;
    });
});

Answer 13

$('#checkbox1').click(function() {
    if($(this).is(":checked")) {
        var returnVal = confirm("Are you sure?");
        $(this).attr("checked", returnVal);
    }
    $('#textbox1').val($(this).is(':checked')); 
});


<div id="check">
    <input type="checkbox" id="checkbox1" />
    <input type="text" id="textbox1" />
</div>

Answer 14

देर से जवाब, लेकिन आप भी उपयोग कर सकते हैं on("change")

$('#check').on('change', function() {
     var checked = this.checked
    $('span').html(checked.toString())
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="check" > <span>Check me!</span>

Answer 15

बस बस क्लिक करें घटना का उपयोग करें मेरा चेक बॉक्स आईडी CheckAll है

     $('#CheckAll').click(function () {

        if ($('#CheckAll').is(':checked') == true) {

             alert(";)");
      }
    }

Answer 16

नाम से रेडियो मूल्य प्राप्त करें

 $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
            {
                resetAll();                 
            }
    });

Answer 17

मुझे यकीन नहीं है कि हर कोई इसे इतना जटिल क्यों बना रहा है। यह सब मैंने किया है।

if(!$(this).is(":checked")){ console.log("on"); }

Answer 18

 $("#person_IsCurrentAddressSame").change(function ()
    {
        debugger
        if ($("#person_IsCurrentAddressSame").checked) {
            debugger

        }
        else {

        }

    })

Comments

कोड-केवल उत्तरों को निम्न गुणवत्ता माना जाता है: यह सुनिश्चित करना सुनिश्चित करें कि आपका कोड क्या करता है और यह समस्या को हल कैसे करता है। यह पूछने वाले और भविष्य के पाठकों दोनों की मदद करेगा यदि आप अपनी पोस्ट में अधिक जानकारी जोड़ सकते हैं। पूरी तरह से कोड-आधारित उत्तरों की व्याख्या करना देखें: meta.stackexchange.com/questions/114762/…

— borchvm