JQuery ব্যবহার করে চেকবক্সের পরিবর্তন কীভাবে পরিচালনা করবেন?


106

আমার কিছু কোড আছে

<input type="checkbox" id="chk" value="value" />
<label for="chk">Value </label>
<br/>
<input type="button" id="But1" value="set value" />
<br />
<input type="button" id="But2" value="read checked" />

জাভাস্ক্রিপ্ট:

$(document).ready(function () {
    console.log("Ready ...");
    registerHandlers();

    function registerHandlers() {
        $('#But1').click(function () {
            $('#chk').prop('checked', !$('#chk').is(':checked'));
        });
        $('#But2').click(function () {
            var chk1 = $('#chk').is(':checked');
            console.log("Value : " + chk1);
        });

        $('input[type="checkbox"]').change(function () {
            var name = $(this).val();
            var check = $(this).prop('checked');
            console.log("Change: " + name + " to " + check);
        });
    }
});

JQuery ব্যবহার করে চেকবক্সের পরিবর্তন কীভাবে পরিচালনা করবেন? চেক করা যে কোনও চেকবক্সগুলি পরিবর্তন করতে আমার হ্যান্ডলারটি লাগাতে হবে।

[হালনাগাদ]

একটি চেকবক্স এবং কয়েকটি বোতাম রয়েছে। প্রতিটি বোতাম চেক বক্স পরিবর্তন করতে পারে। কিভাবে চেকবক্স পরিবর্তন করে একটি ইভেন্ট ধরবেন?

[হালনাগাদ]

আমার এই উদাহরণে জেসফিডাল চেঞ্জবক্সের হ্যান্ডেল দরকার । আমি যখন বাক্সটিতে ক্লিক করি তখন "ঠিক আছে" বোতামটি প্রদর্শিত হয় না।


আমি কি সত্যিই বুঝতে পারি না আপনার সমস্যা? যখন একটি চেকবক্স পরিবর্তন করা হবে তখন কী ঘটবে?
নিক্লাস

সমস্যা কি? এই কোডটি ঠিক কাজ করছে বলে মনে হচ্ছে
জারেডপাড়

2
আপনি কি দয়া করে আপনার প্রশ্নটি নতুন করে লিখতে পারেন? আপনার ইতিমধ্যে $ ('ইনপুট [টাইপ = "চেকবক্স"]') রয়েছে hand হ্যান্ডলার পরিবর্তন করুন, কী ভুল?
ম্যাডম্যান

আপনি যদি বোতামটি পরিবর্তন করেন চেকবক্স পরিবর্তন ইভেন্টগুলি ঘটে না
বিল

3
অবগতির জন্য; $('#chk').prop('checked')তারপরে একটি বুলিয়ান দেয় তারপরে বৈশিষ্ট্যের মান। Api.jquery.com/prop
স্টিফান

উত্তর:


163

:checkboxনির্বাচক ব্যবহার করুন :

$(':checkbox').change(function() {

        // do stuff here. It will fire on any checkbox change

}); 

কোড: http://jsfiddle.net/s6fe9/


75
... এবং this.checkedচেকবক্সটি চেক করা হয়েছে কিনা তা নির্ধারণের জন্য খুব দরকারী।
স্টিফান

1
একাধিক হ্যান্ডলারের নিবন্ধন করা কি সম্ভব?
বিল

1
এটি কি 2015 সালে সুপারিশ করা হয়?
ইউজান সানিক

2
দেখে মনে হচ্ছে না যে API পরিবর্তন হয়েছে, তাই হ্যাঁ।
সামিচ

এই চাহিদা $ (ডকুমেন্ট) .ready (ফাংশন (এর ভিতর হতে) ... আমার জন্যে, এটা কি ঠিক?
Kaya

66

আপনি ক্ষেত্রের আইডিও ব্যবহার করতে পারেন

$('#checkbox1').change(function() {
   if($(this).is(":checked")) {
      //'checked' event code
      return;
   }
   //'unchecked' event code
});

17

আশা করি, এটি কিছুটা সহায়ক হবে।

$('input[type=checkbox]').change(function () {
    if ($(this).prop("checked")) {
        //do the stuff that you would do when 'checked'

        return;
    }
    //Here do the stuff you want to do when 'unchecked'
});

6
jQuery 1.6 হিসাবে, $ (এটি) .প্রপ ("পরীক্ষিত") ব্যবহার করা ভাল, কারণ এটি চেকবাক্সের প্রকৃত অবস্থার সাথে গতিশীল পরিবর্তন হবে।
hrabinowitz

3
.attr ("চেক করা") সঠিক নয়, কারণ এটি ব্যবহারকারী ক্লিক হিসাবে আপডেট হয় না। আমি @ hrabinowitz এর মন্তব্য নিশ্চিত।
অ্যাড্রিয়েন

7
$("input[type=checkbox]").on("change", function() { 

    if (this.checked) {

      //do your stuff

     }
});

1
পোস্ট করার আগে দয়া করে আপনার নিজের কোডটি পরীক্ষা করে দেখুন। আপনার নির্বাচকদের সাথে একটি সুস্পষ্ট সমস্যা রয়েছে ...
জোনাথন

লাইভ () অবচয় করা হয়েছে।
গেটলি

4
$('#myForm').on('change', 'input[type=checkbox]', function() {
    this.checked ? this.value = 'apple' : this.value = 'pineapple';
});

3
দয়া করে আপনার উত্তরটি বিস্তারিতভাবে বর্ণনা করুন: কেবলমাত্র কোড-সমাধানগুলি মুছে ফেলার সম্ভাবনা বেশি থাকে, কারণ তারা ব্যাখ্যা করে না, কেবল ঠিক করুন (যদি থাকে)।
রেকাসেরু

দুঃখিত @ রেকাশাসুড়ু আমি এটি পরের বার আরও ভাল করে করব
এভারটন জেডপি

0

আমার কাছে মনে হচ্ছে অপসারণটি ক্রোমে সঠিকভাবে কাজ করছে না: জেএসফিডাল

        $('#badBut1').click(function () {
        checkit('Before');
        if( $('#chk').prop('checked') )
        {
          $('#chk').removeProp('checked');
        }else{
            $('#chk').prop('checked', true);
        }
        checkit('After');
    });
    $('#But1').click(function () {
        checkit('Before');
        if( $('#chk').prop('checked') )
        {
          $('#chk').removeClass('checked').prop('checked',false);
        }else{
            $('#chk').addClass('checked').prop('checked', true);
        }
        checkit('After');
    });

    $('#But2').click(function () {
        var chk1 = $('#chk').is(':checked');
        console.log("Value : " + chk1);
    });

    $('#chk').on( 'change',function () {
        checkit('Result');
    });
    function checkit(moment) {
        var chk1 = $('#chk').is(':checked');
        console.log(moment+", value = " + chk1);
    };

কীভাবে ইভেন্ট ছাড়াই চেকবক্সটি টগল করতে হবে (বাইরে থেকে): jsfiddle.net/k91k0sLu/1
লরেন্ট বেলোয়েল

0

নামে রেডিওর মান পান

  $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
            {
                resetAll();                 
            }
    });
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.