यदि चेकबॉक्स की जाँच की जाती है, तो यह करें

Question

जब मैं एक चेकबॉक्स की जांच करता हूं, तो मैं चाहता हूं कि यह चालू हो <p> #0099ff।

जब मैं चेकबॉक्स को अनचेक करता हूं, तो मैं चाहता हूं कि इसे पूर्ववत करें।

कोड I अभी तक:

$('#checkbox').click(function(){
    if ($('#checkbox').attr('checked')) {
        /* NOT SURE WHAT TO DO HERE */
    }
}) 

Comments

"... जब यह अनियंत्रित है, उसी फ़ंक्शन को अक्षम करने के लिए।" - पास किया गया फ़ंक्शन .click()क्लिक इवेंट पर इनवॉइस किया गया है। इसलिए मुझे समझ नहीं आ रहा है कि "सक्षम" और "अक्षम" से आपका क्या मतलब है। यदि चेकबॉक्स की जाँच की जाती है, तो आप फ़ंक्शन को आमंत्रित कर सकते हैं a()। लेकिन जब आप चेकबॉक्स चेक नहीं करते हैं, तो आपको उलटा फ़ंक्शन लिखना होगा । मैं उलझन में हूं।

— जेन्सग्राम

आप निश्चित रूप से, .bind()और चेकबॉक्स स्थिति के आधार पर किसी अन्य तत्व के .unbind()लिए ईवेंट कर सकते हैं । क्या आप उसके बाद हैं?

— jensgram

स्पैमिंग के लिए क्षमा करें, लेकिन मैंने एक उदाहरण दिया है कि मैं किस बारे में बात कर रहा हूं।

— jensgram

मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन अब jQuery का उपयोग prop()इस प्रश्न के लिए क्या करना चाहता था attr(); prop()विधि वापस तो नहीं बनाया गया था। this.checkedहालाँकि इसके बारे में उत्तर अभी भी उपयोगी हैं।

— trysis

Answer 1

मैं उपयोग करेगा .change()और this.checked:

$('#checkbox').change(function(){
    var c = this.checked ? '#f00' : '#09f';
    $('p').css('color', c);
});

-

this.checked
एंडी ई का उपयोग करने पर हमने एक महान लेखन किया है कि हम jQuery का उपयोग कैसे करते हैं: एक तत्व के गुणों तक पहुंचने के लिए jQuery की भयानक शक्ति का उपयोग करना । लेख विशेष रूप से उपयोग के .attr("id")मामले में व्यवहार करता है लेकिन इस मामले #checkbox में एक <input type="checkbox" />तत्व मुद्दा बनाम $(...).attr('checked')(या यहां तक ​​कि $(...).is(':checked')) बनाम के लिए समान है this.checked।

Answer 2

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

$('#checkbox').click(function(){
    if (this.checked) {
        $('p').css('color', '#0099ff')
    }
}) 

कभी-कभी हम jquill से आगे निकल जाते हैं। सादे जावास्क्रिप्ट के साथ jquery का उपयोग करके कई चीजें प्राप्त की जा सकती हैं।

Answer 3

ऐसा हो सकता है कि "this.checked" हमेशा "चालू" हो। इसलिए, मेरी सलाह है:

$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    console.log('Checked');
  } else {
    console.log('Unchecked');
  }
});

Comments

मेरे मामले में, मैं $(':checkbox')इसे काम करने के लिए बस बदल दिया ;)

— Pathros

Answer 4

यह बेहतर है यदि आप एक वर्ग को एक अलग रंग से परिभाषित करते हैं, तो आप कक्षा को बदलते हैं

$('#checkbox').click(function(){
    var chk = $(this);
    $('p').toggleClass('selected', chk.attr('checked'));
}) 

इस तरह आपका कोड क्लीनर है, क्योंकि आपको सभी सीएसएस गुण निर्दिष्ट नहीं करने हैं (मान लीजिए कि आप एक सीमा, एक पाठ शैली या अन्य जोड़ना चाहते हैं ...) लेकिन आप सिर्फ एक वर्ग स्विच करते हैं

Comments

जेनेरिक समाधान के लिए +1। वहाँ ऐसा करने के लिए कोई कारण नहीं है $('#checkbox').attr('checked'), अगर हम जानते हैं कि हालांकि #checkbox है एक चेकबॉक्स (यदि नहीं, आईडी नहीं बल्कि भ्रामक है)। this.checkedकरूँगा।

— jensgram

@jensgram @fcalderan +1 टिप के लिए धन्यवाद! मैंने स्विच के साथ टॉगलक्लास कभी नहीं देखा था। मैं अपना पोस्ट हटा रहा हूं क्योंकि यह बेकार है। इतना अशिष्ट होने के लिए खेद है, लेकिन मुझे लगता है कि यह उत्तर '#checkbox' के बिना दो बार चुने जाने पर 100% सही होगा: शायद इसके बजाय $ (यह) का उपयोग करें? या जेन्सग्राम का समाधान?

— हमले

@ बेशक आप उपयोग करने से पहले अपने तत्व को कैश कर सकते हैं (अब कोड देखें)। यह जाँच $ (..) से भी अधिक तेज़ है।

Answer 5

मुझे चेकबॉक्स के इस मुद्दे से निपटने के लिए एक पागल समाधान का पता चला है कि यहां चेक या चेक नहीं किया गया है मेरा एल्गोरिथ्म है ... एक वैश्विक चर बनाएं जो आपके चेकधारक को कहे

check_holder के 3 राज्य हैं

1. अपरिभाषित अवस्था
2. 0 राज्य
3. 1 राज्य

यदि चेकबॉक्स क्लिक किया जाता है,

$(document).on("click","#check",function(){
    if(typeof(check_holder)=="undefined"){
          //this means that it is the first time and the check is going to be checked
          //do something
          check_holder=1; //indicates that the is checked,it is in checked state
    }
    else if(check_holder==1){
          //do something when the check is going to be unchecked
          check_holder=0; //it means that it is not checked,it is in unchecked state
    }
     else if(check_holder==0){
            //do something when the check is going to be checked
            check_holder=1;//indicates that it is in a checked state
     }
});

ऊपर दिए गए कोड का उपयोग कई स्थिति में किया जा सकता है ताकि यह पता लगाया जा सके कि चेकबॉक्स चेक किया गया है या नहीं। इसके पीछे की अवधारणा चेकबॉक्स स्थिति को एक चर में सहेजना है, अर्थात जब यह चालू, बंद हो। मुझे आशा है कि आपकी समस्या को हल करने के लिए तर्क का उपयोग किया जा सकता है।

Comments

समाधान वास्तव में पागल है लेकिन अच्छे तरीके से नहीं। हाँ, वैश्विक चर आज आपको एक समस्या को हल करने में मदद कर सकते हैं, लेकिन वे कल आपके लिए लगभग एक समस्या बन जाएंगे। जहां संभव हो, उनसे बचने की कोशिश करें, जो कि 99% समय है। वे वैश्विक राज्य की चिंता किए बिना आपके कोड के बारे में तर्क करना असंभव बनाते हैं। एक वैश्विक चर मासूम लग सकता है लेकिन जल्दी से यह दसियों तो सैकड़ों हो जाता है। वहाँ गया, देखा कि और यह सुंदर नहीं है।

— द्विजंच

Answer 6

इस कोड की जाँच करें:

<!-- script to check whether checkbox checked or not using prop function -->
<script>
$('#change_password').click(function(){
    if($(this).prop("checked") == true){ //can also use $(this).prop("checked") which will return a boolean.
        alert("checked");
    }
    else if($(this).prop("checked") == false){
        alert("Checkbox is unchecked.");
    }
});
</script>

Answer 7

$('#checkbox').change(function(){
   (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});

Answer 8

संभवतः आप इस कोड के साथ कार्रवाई करने के लिए जा सकते हैं क्योंकि चेकबॉक्स चेक या अनचेक किया गया है।

$('#chk').on('click',function(){
    if(this.checked==true){
      alert('yes');
    }else{
      alert('no');
    }
});

Answer 9

मुझे क्या करना होगा :

$('#checkbox').on("change", function (e){ 

    if(this.checked){

      // Do one thing 

    }

    else{

     // Do some other thing

    }

});

देखें: https://www.w3schools.com/jsref/prop_checkbox_checked.asp

Answer 10

इष्टतम कार्यान्वयन

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});

---

डेमो

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input id="checkbox" type="checkbox" /> 
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est
    laborum.
</p>

Answer 11

अंतर्निहित घटनाओं का उपयोग क्यों नहीं करते?

$('#checkbox').click(function(e){
    if(e.target.checked) {
     // code to run if checked
        console.log('Checked');

     } else {

     //code to run if unchecked
        console.log('Unchecked');
     }
});