चेक्ड सेलेक्टर

सेलेक्टर :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!');
});

यह भी देखें