জাভাস্ক্রিপ্ট (jQuery বা ভ্যানিলা) দিয়ে চেক / আনচেক চেকবক্স?

Question

জাভাস্ক্রিপ্ট, জকিউয়ারি বা ভ্যানিলা ব্যবহার করে কীভাবে একটি চেকবাক্স চেক / চেক করা যায় না?

Comments

সম্ভাব্য সদৃশ পরিবর্তন চেকবক্সটি জাভাস্ক্রিপ্ট ব্যবহার

— ফল

Answer 1

javascript:

// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;

jQuery (1.6+):

// Check
$("#checkbox").prop("checked", true);

// Uncheck
$("#checkbox").prop("checked", false);

jQuery (1.5।):

// Check
$("#checkbox").attr("checked", true);

// Uncheck
$("#checkbox").attr("checked", false);

Comments

.Prop ব্যবহার ফায়ারফক্সে স্থানীয়ভাবে হোস্ট করা ফাইলগুলির সাথে Jquery 1.11.2 এর সাথে কাজ করছে বলে মনে হচ্ছে না। .attr না। আমি আরও পুরোপুরি পরীক্ষা করেছি না। এখানে কোডটি রয়েছে: `` `personContent.find (" [তথ্য-নাম = '"+ পাস.নাম +"'] ")। বাচ্চারা ('ইনপুট'); `` `

— অ্যান্ড্রু ডোনস

আমরা বরং ব্যবহার করা উচিত attrবা prop?

— কালো

দৃশ্যত ইভেন্টটি .checked = true/falseট্রিগার করে না change:

— leaf

@ অ্যালবার্ট: আপনি কেন কঠোর সাম্যতার পরীক্ষায় নিয়োগ পরিবর্তন করেছেন? আপনি উত্তরটি ভঙ্গ করলেন।

— মার্টিজন পিটারস

তুমি ঠিক. এটা সম্পূর্ণ আমার খারাপ। সে সম্পর্কে দুঃখিত

— অ্যালবার্ট

Answer 2

গুরুত্বপূর্ণ আচরণ যা এখনও উল্লেখ করা হয়নি:

প্রোগ্রামযুক্তভাবে চেক করা বৈশিষ্ট্যটি সেট করা , changeচেকবক্সের ইভেন্টটিকে আগুন দেয় না ।

এই ঝাঁকুনিতে নিজেকে দেখুন:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(ক্রোড 46, ফায়ারফক্স 41 এবং আইই 11-তে পরীক্ষিত ফিডল)

click()পদ্ধতি

কোনও দিন আপনি নিজেকে কোড লিখনের সন্ধান করতে পারেন, যা ইভেন্টটি বরখাস্ত হওয়ার উপর নির্ভর করে। ইভেন্টটি আগুন ধরেছে তা নিশ্চিত করতে, click()চেকবক্সের উপাদানটির পদ্ধতিটি কল করুন:

document.getElementById('checkbox').click();

যাইহোক, এটি চেকবাক্সের নির্দিষ্ট করা স্থিতি টগল করে, এটি নির্দিষ্টভাবে trueবা এতে সেট করার পরিবর্তে false। মনে রাখবেন যে changeইভেন্টটি কেবল তখনই চালিত হওয়া উচিত, যখন চেক করা বৈশিষ্ট্যটি আসলে পরিবর্তিত হয়।

এটি jQuery উপায়ে প্রযোজ্য: বৈশিষ্ট্যটি ব্যবহার করে propবা ব্যবহার করে attr, changeইভেন্টটিকে আগুন দেয় না ।

checkedএকটি নির্দিষ্ট মান সেট করা

পদ্ধতিটি checkedকল করার আগে আপনি বৈশিষ্ট্যটি পরীক্ষা করতে পারেন click()। উদাহরণ:

function toggle(checked) {
  var elm = document.getElementById('checkbox');
  if (checked != elm.checked) {
    elm.click();
  }
}

ক্লিক করার পদ্ধতি সম্পর্কে এখানে আরও পড়ুন:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Comments

এটি একটি ভাল উত্তর তবে ব্যক্তিগতভাবে আমি ক্লিক () ক্লিক করার পরিবর্তে পরিবর্তন ইভেন্টটি elm.dispatchEvent(new Event('change'));

— চালিত

@ উইক্টর শ্যারোভাতভ আপনি কেন এই পরিবর্তন ইভেন্টটিকে বরখাস্ত করতে পছন্দ করবেন?

— পিটারকো

আমি কেবলমাত্র আংশিকভাবেই একমত হতে পারি - অ্যাডব্লকযুক্ত অনেক ওয়েব ব্রাউজার বিজ্ঞাপন থেকে অনাকাঙ্ক্ষিত কর্মের কারণে ডমকে ভার্চুয়াল ক্লিক () থেকে রক্ষা করছেন

— pkolawa

@ পিটারকো: সম্ভবত যেহেতু এটি আরও স্পষ্টভাবে অভিপ্রায় চিত্রিত হয়েছে - পরিবর্তনের ইভেন্টটিকে বরখাস্ত করার লক্ষ্যে উপাদানটি ক্লিক করুন পরিবর্তিত ইভেন্টের জন্য একটি পরিবর্তন অনুষ্ঠান প্রেরণ করুন - পরোক্ষ (প্রত্যক্ষদর্শীর পরিবর্তে ট্রিগার পরিবর্তন ক্লিক করুন)। পরেরটি যথেষ্ট পরিষ্কার এবং একটি ক্লিকের পরিবর্তনে পরিবর্তন ক্লিক করে তা পাঠকের জানতে হবে না।

— বিল দাগ

Answer 3

যাচাই করতে:

document.getElementById("id-of-checkbox").checked = true;

চেক করতে:

document.getElementById("id-of-checkbox").checked = false;

Comments

এটি কেবলমাত্র পরীক্ষিত বৈশিষ্ট্য পরিবর্তন করতে পারে। তবে অনক্লিক এবং অনুরূপ ইভেন্টগুলি ট্রিগার করা হবে না।

— পল স্টেলিয়ান

Answer 4

আমরা একটি কণা হিসাবে চেকবক্স চেক করতে পারেন,

$('id of the checkbox')[0].checked = true

এবং দ্বারা চেক করা,

$('id of the checkbox')[0].checked = false

Comments

আপনি যদি কেবল একটি উপাদান নির্বাচন করে থাকেন তবে আপনাকে সত্যই অ্যারে সূচকের প্রয়োজন নেই। তবে আমি অনুমান করি আপনি যদি স্পষ্ট হতে চান। হা হা

— রিজভস্কি

@ রিজোস্কি আপনার স্থানীয় এইচটিএমএল উপাদানটি পেতে সূচকটি দরকার - jQuery অবজেক্টগুলির "পরীক্ষিত" সম্পত্তি নেই

— হেনরিক ক্রিস্টেনসেন

এটি আমার পক্ষে কাজ করেছে। অ্যারে সূচক না থাকলে আমি অপরিজ্ঞাত ত্রুটি পেয়ে যাচ্ছিলাম। অনেক ধন্যবাদ, আমার দিন বাঁচিয়েছে।

— নেড়ি

Answer 5

আমি লক্ষ করতে চাই, যে শূন্য খালি স্ট্রিংয়ের জন্য 'চেকড' বৈশিষ্ট্যটি সেট করা একটি চেক বাক্সে নিয়ে যায়।

সুতরাং আপনি যদি 'পরীক্ষিত' বৈশিষ্ট্যটিকে "মিথ্যা" হিসাবে সেট করেন , চেকবক্সটি চেক করা হবে। আমি খালি স্ট্রিং, এর মান সেট করতে হয়েছে নাল বা বুলিয়ান মান মিথ্যা অর্ডার নিশ্চিত চেকবক্সটি চেক করা হয়নি করতে হবে।

Comments

এটি কারণ খালি খালি স্ট্রিংটিকে সত্য বলে বিবেচনা করা হয়।

— জেমস কোয়েল

Answer 6

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

//Check
document.getElementById('checkbox').setAttribute('checked', 'checked');

//UnCheck
document.getElementById('chk').removeAttribute('checked');

Answer 7

<script type="text/javascript">
    $(document).ready(function () {
        $('.selecctall').click(function (event) {
            if (this.checked) {
                $('.checkbox1').each(function () {
                    this.checked = true;
                });
            } else {
                $('.checkbox1').each(function () {
                    this.checked = false;
                });
            }
        });

    });

</script>

Answer 8

function setCheckboxValue(checkbox,value) {
    if (checkbox.checked!=value)
        checkbox.click();
}

Answer 9

তাহলে কিছু কারণে, আপনি না করার জন্য একটি রান চান (না পারেন বা) .click()চেকবক্সটি উপাদান উপর, আপনি কেবল এর মান সরাসরি তার .checked সম্পত্তি (একটি মাধ্যমে পরিবর্তন করতে পারেন IDL অ্যাট্রিবিউট এর <input type="checkbox">)।

নোট করুন যে এটি করার ফলে সাধারণত সম্পর্কিত ঘটনা ( পরিবর্তন ) জ্বলে ওঠে না তাই কোনও সম্পর্কিত ইভেন্ট হ্যান্ডলারের সাথে কাজ করে এমন একটি সম্পূর্ণ সমাধান পেতে আপনাকে ম্যানুয়ালি এটিকে ফায়ার করতে হবে।

কাঁচা জাভাস্ক্রিপ্ট (ES6) এ এখানে কার্যকরী উদাহরণ রয়েছে:

class ButtonCheck {
  constructor() {
    let ourCheckBox = null;
    this.ourCheckBox = document.querySelector('#checkboxID');

    let checkBoxButton = null;
    this.checkBoxButton = document.querySelector('#checkboxID+button[aria-label="checkboxID"]');

    let checkEvent = new Event('change');
    
    this.checkBoxButton.addEventListener('click', function() {
      let checkBox = this.ourCheckBox;

      //toggle the checkbox: invert its state!
      checkBox.checked = !checkBox.checked;

      //let other things know the checkbox changed
      checkBox.dispatchEvent(checkEvent);
    }.bind(this), true);

    this.eventHandler = function(e) {
      document.querySelector('.checkboxfeedback').insertAdjacentHTML('beforeend', '<br />Event occurred on checkbox! Type: ' + e.type + ' checkbox state now: ' + this.ourCheckBox.checked);

    }


    //demonstration: we will see change events regardless of whether the checkbox is clicked or the button

    this.ourCheckBox.addEventListener('change', function(e) {
      this.eventHandler(e);
    }.bind(this), true);

    //demonstration: if we bind a click handler only to the checkbox, we only see clicks from the checkbox

    this.ourCheckBox.addEventListener('click', function(e) {
      this.eventHandler(e);
    }.bind(this), true);


  }
}

var init = function() {
  const checkIt = new ButtonCheck();
}

if (document.readyState != 'loading') {
  init;
} else {
  document.addEventListener('DOMContentLoaded', init);
}

<input type="checkbox" id="checkboxID" />

<button aria-label="checkboxID">Change the checkbox!</button>

<div class="checkboxfeedback">No changes yet!</div>

আপনি যদি এটি চালান এবং চেকবক্স এবং বোতাম উভয়টিতে ক্লিক করেন তবে আপনার কীভাবে এটি কাজ করে তা অনুধাবন করা উচিত।

নোট করুন যে আমি বংশবৃদ্ধি / সরলতার জন্য ডকুমেন্ট.কোয়ারী নির্বাচনকারী ব্যবহার করেছি, তবে এটি নির্ধারকের কাছে প্রদত্ত আইডিটি সহজেই তৈরি করা যেতে পারে, বা এটি একটি চেকবাক্সের জন্য আরিয়া-লেবেল হিসাবে কাজ করে এমন সমস্ত বোতামের ক্ষেত্রে প্রযোজ্য হতে পারে (দ্রষ্টব্য আমি বোতামটিতে কোনও আইডি সেট করার এবং চেকবক্সটিকে একটি এরিয়া-লেবেল্ডবি দেওয়া বিরক্ত করেনি, যা এই পদ্ধতিটি ব্যবহার করে করা উচিত) বা এটি আরও প্রসারিত করার জন্য অন্য কোনও উপায়। শেষ দুটি addEventListenerগুলি এটি কীভাবে কাজ করে তা ডেমো করতে।

Answer 10

একক পরীক্ষার জন্য চেষ্টা করুন

myCheckBox.checked=1

<input type="checkbox" id="myCheckBox"> Call to her

বহু চেষ্টা করার জন্য

document.querySelectorAll('.imChecked').forEach(c=> c.checked=1)

Buy wine: <input type="checkbox" class="imChecked"><br>
Play smooth-jazz music: <input type="checkbox"><br>
Shave: <input type="checkbox" class="imChecked"><br>

Answer 11

আমি বর্তমানের উত্তরগুলির সাথে একমত, তবে আমার ক্ষেত্রে এটি কার্যকর হয় না, আমি আশা করি এই কোডটি ভবিষ্যতে কাউকে সহায়তা করবে:

// check
$('#checkbox_id').click()