চেকড সিলেক্টর

:checked সিলেক্টরটি সেইসব এলিমেন্ট নির্বাচন করে, যেগুলো চেকড বা সিলেক্টেড, অর্থাৎ যেগুলোর checked বা selected অ্যাট্রিবিউট রয়েছে। :checked সিলেক্টরটি চেকবক্স (checkbox) এবং রেডিও বাটন (radio) এর সাথে কাজ করে, এবং সেইসাথে option ট্যাগযুক্ত এলিমেন্টগুলোর জন্যও। শুধুমাত্র select এলিমেন্টের নির্বাচিত অপশনগুলো পেতে, ব্যবহার করুন selected সিলেক্টর।

সিনট্যাক্স

এভাবে আমরা checked অ্যাট্রিবিউটযুক্ত এলিমেন্টগুলো নির্বাচন করি:

javascript$(':checked');

উদাহরণ

আসুন, প্রতিবার একটি চেকবক্স নির্বাচিত হলে, নির্বাচিত চেকবক্সের সংখ্যা দেখাই। আপনি দেখতে পাচ্ছেন, আপনার প্রথম ক্লিক করার আগেই ডিফল্টভাবে নির্বাচিত চেকবক্সগুলো দেখানো হবে, যা হলো দ্বিতীয় এবং চতুর্থটি:

html<form>
<p>
  <input type="checkbox" name="cbox" value="one">
  <input type="checkbox" name="cbox" value="two" checked="checked">
  <input type="checkbox" name="cbox" value="three">
  <input type="checkbox" name="cbox" value="four" checked>
  <input type="checkbox" name="cbox" value="five">
</p>
</form>
<div></div>

cssdiv {
  color: green;
}

javascriptlet countChecked = function() {
  let n = $('input:checked').length;
  $('div').text('Checked: ' + n);
};
countChecked();

$('input[type=checkbox]').on('click', countChecked);

উদাহরণ

আসুন ক্লিক করলে নীচে প্রতিটি নির্বাচিত রেডিও বাটনের মান দেখাই:

html<form>
  <div>
    <input type="radio" name="digits" value="one" id="one">
    <label for="one">one</label>
  </div>
  <div>
    <input type="radio" name="digits" value="two" id="two">
    <label for="two">two</label>
  </div>
  <div>
    <input type="radio" name="digits" value="three" id="three">
    <label for="three">three</label>
  </div>
  <div id="text"></div>
</form>

cssinput, label {
  line-height: 1.5em;
}

javascript$('input').on('click', function() {
  $('#text').html($('input:checked').val() + ' is checked!');
});

আরও দেখুন