যদি চেকবক্সটি চেক করা থাকে তবে এটি করুন


126

আমি যখন একটি চেকবাক্স চেক করি, আমি এটি চালু করতে চাই <p> #0099ff

আমি যখন চেকবাক্সটি আনচেক করে রাখি, আমি এটিকে পূর্বাবস্থায় ফেরাতে চাই।

আমার এখন পর্যন্ত কোড রয়েছে:

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

1
"... যখন এটি পরীক্ষা না করা হয়, একই ফাংশনটি অক্ষম করতে।" - এতে দেওয়া ফাংশনটি .click()ক্লিক ইভেন্টে ডাকা হবে। অতএব "সক্ষম" এবং "অক্ষম করুন" দ্বারা আপনি কী বোঝাতে চেয়েছেন তা আমি বুঝতে পারি না। যদি চেকবক্সটি চেক করা থাকে তবে আপনি ফাংশনটি শুরু করতে পারেন a()। চেকবক্সটি চেক না করা অবস্থায় আপনাকে অনুরোধ করতে বিপরীত ফাংশনটি লিখতে হবে। আমি বিভ্রান্ত
jensgram

আপনি অবশ্যই, .bind()এবং চেকবক্সের রাজ্যের উপর ভিত্তি করে অন্য উপাদানগুলিতে .unbind()ইভেন্টগুলি করতে পারেন । আপনি কি এই পরে আছেন?
জেনসগ্রাম

1
স্প্যামিংয়ের জন্য দুঃখিত তবে আমি যা বলছি তার একটি উদাহরণ তৈরি করেছি ।
jensgram

1
আমি জানি এটি একটি পুরানো পোস্ট, তবে এখন jQuery prop()এই প্রশ্নটি যা ব্যবহার করতে চেয়েছিল তার জন্য ব্যবহার attr()করে; prop()পদ্ধতি তখন তৈরি করা হয়েছে। তবে উত্তরগুলি this.checkedসম্ভবত এখনও কার্যকর।
ট্রাইসিস

উত্তর:


235

আমি ব্যবহার করব .change() এবং this.checked:

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

-

ব্যবহারের this.checked
অ্যান্ডি ই : একটি মহান লেখার আপ কিভাবে আমরা jQuery overuse ঝোঁক সম্পন্ন হয়েছে একটি উপাদান অ্যাক্সেস বৈশিষ্ট্য jQuery এর অসাধারণ ক্ষমতা ব্যবহার । নিবন্ধ বিশেষভাবে ব্যবহার একইরূপে .attr("id")কিন্তু যদি যে #checkbox হয় একটি <input type="checkbox" />উপাদান সমস্যার জন্য একই $(...).attr('checked')(অথবা এমনকি $(...).is(':checked')) বনাম this.checked


48

এটা চেষ্টা কর.

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

কখনও কখনও আমরা jquery overkill। প্লেইন জাভাস্ক্রিপ্ট সহ jquery ব্যবহার করে অনেক কিছুই অর্জন করা যায়।


34

এটি হতে পারে যে "this.checked" সর্বদা "চালু" থাকে। অতএব, আমি সুপারিশ করছি:

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

আমার ক্ষেত্রে, আমি $(':checkbox')এটির কাজ করার জন্য সবেমাত্র পরিবর্তিত হয়েছি ;)
পাঠ্রস

21

এটি আরও ভাল যদি আপনি কোনও বর্ণের সাথে কোনও শ্রেণি সংজ্ঞায়িত করেন তবে আপনি ক্লাসটি স্যুইচ করেন

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

এইভাবে আপনার কোডটি এটি ক্লিনার কারণ আপনাকে সমস্ত সিএসএস বৈশিষ্ট্য নির্দিষ্ট করতে হবে না (ধরা যাক আপনি একটি বর্ডার, একটি পাঠ্য শৈলী বা অন্যান্য যুক্ত করতে চান ...) তবে আপনি কেবল একটি শ্রেণী পরিবর্তন করতে পারেন


4
জেনেরিক সমাধানের জন্য +1। করার কোনও কারণ নেই $('#checkbox').attr('checked'), তবে যদি আমরা জানি যে #checkbox এটি একটি চেকবক্স (যদি না হয় তবে আইডিটি বিভ্রান্তিকর হয়)। this.checkedকরব.
jensgram

@jensgram @fcalderan +1 টিপটির জন্য ধন্যবাদ! আমি স্যুইচ সহ টগলক্লাস কখনও দেখিনি। আমার পোস্টটি অকেজো বলে মুছে ফেলছি। খুব পছন্দসই বলে দুঃখিত, তবে আমার মনে হয় এই উত্তরটি '# চেকবক্স' দু'বার নির্বাচিত না করে 100% নিখুঁত হবে: এর পরিবর্তে সম্ভবত maybe (এটি) ব্যবহার করবেন? নাকি জেনসগ্রামের সমাধান?
আক্রমণ করুন

@ অ্যাক্ট অবশ্যই আপনি ব্যবহারের আগে আপনার উপাদানটিকে ক্যাশে করতে পারেন (এখনই কোডটি দেখুন)। এই কোডটি চেক করা $ (..) এর থেকেও বেশি দ্রুতগতি সম্পন্ন ('পরীক্ষা করা')

4

চেকবক্সটি পরীক্ষা না করা বা চেক না করা এই সমস্যাটি মোকাবিলার জন্য আমি একটি পাগল সমাধান খুঁজে পেয়েছি এটি আমার অ্যালগরিদম ... বিশ্বব্যাপী ভেরিয়েবল তৈরি করুন চলুন চেক- হোল্ডার বলে

চেক_হোল্ডারের 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
     }
});

চেকবক্সটি চেক করা হয়েছে কিনা তা চেক করা হয়েছে কিনা তা জানতে উপরের কোডটি অনেক পরিস্থিতিতে ব্যবহার করা যেতে পারে। এর পেছনের ধারণাটি হ'ল চেকবক্সটি একটি ভেরিয়েবলের মধ্যে সংরক্ষণ করা, অর্থাত্ যখন এটি চালু থাকে। আমি আশা করি আপনার সমস্যা সমাধানের জন্য যুক্তিটি ব্যবহার করা যেতে পারে।


1
সমাধানটি আসলে পাগল তবে ভাল উপায়ে নয়। হ্যাঁ গ্লোবাল ভেরিয়েবলগুলি আপনাকে আজ একটি সমস্যার সমাধান করতে সহায়তা করতে পারে তবে তারা আগামীকাল অবশ্যই আপনার জন্য একটি সমস্যা হয়ে উঠবে। তাদের যেখানে সম্ভব সেখানে এড়াতে চেষ্টা করুন, যা সময়ের 99%। তারা বিশ্বব্যাপী রাষ্ট্র সম্পর্কে চিন্তা না করে আপনার কোড সম্পর্কে যুক্তিযুক্ত হওয়া অসম্ভব করে তোলে। একটি গ্লোবাল ভেরিয়েবল নির্দোষ দেখতে পারে তবে দ্রুত এটি দশকের পরে শত শত হয়ে যায়। সেখানে ছিলেন, দেখেছেন এবং এটি সুন্দর নয়।
বিজন্কন

3

এই কোডটি পরীক্ষা করুন:

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

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

1

চেকবক্সটি চেক বা চেক করা না থাকায় সম্ভবত আপনি এই কোডটি সাথে পদক্ষেপ নিতে যেতে পারেন।

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


0

অনুকূল বাস্তবায়ন

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


0

ইভেন্টগুলিতে বিল্ট ব্যবহার করবেন না কেন?

$('#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');
     }
});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.