javascript - jQuery चेकबॉक्स बदलें और घटना पर क्लिक करें




event-handling (11)

Demo

mousedown प्रयोग करें

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

मेरे पास है

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

तथा

$(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?");
        }
    });
});

JSFIDDLE लिंक

यहां बदली गई घटना टेक्स्टबॉक्स मान को चेकबॉक्स स्थिति के साथ अद्यतन करती है। मैं अनचेक पर कार्रवाई की पुष्टि करने के लिए क्लिक ईवेंट का उपयोग करता हूं। यदि उपयोगकर्ता रद्द करना चुनता है, तो चेक मार्क बहाल किया जाता है लेकिन परिवर्तन असंगत स्थिति में चीजों को छोड़ने की पुष्टि से पहले भी आग लग जाता है (चेकबॉक्स चेक होने पर टेक्स्टबॉक्स झूठा कहता है)। मैं रद्दीकरण से कैसे निपट सकता हूं और चेकबॉक्स के साथ टेक्स्टबॉक्स मूल्य को लगातार रख सकता हूं?


आप यहाँ हैं

एचटीएमएल

<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>

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

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

आशा करता हूँ की ये काम करेगा


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

मूल उत्तर:

$(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'));        
    });
});

अद्यतन उत्तर:

$(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);        
    });
});

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


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

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

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

             alert(";)");
      }
    }

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

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

यदि आप <label for="cbId">cb name</label> उपयोग करते हैं तो अधिकांश उत्तर इसे (संभवतः) नहीं <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());
    }
});

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

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 उदाहरण और एचटीएमएल जोड़ा गया

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

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

$('#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>

// 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;
    });
});






event-handling