සලකුණු කළ තේරීමේ ක්රමය
:checked තේරීමේ ක්රමය,
සලකුණු කළ හෝ තෝරාගත් ලක්ෂණ ඇති, එනම් තෝරාගත් මූලද්ව්ය තෝරා ගනී.
මෙම තේරීමේ ක්රමය සලකුණු කළ පෙට්ටි
(checkbox) සහ
රේඩියෝ බොත්තම්
(radio),
එමෙන්ම අංගයන් සඳහා
option
ටැගය සමඟද ක්රියා කරයි.
select
මූලද්ව්යවල තෝරාගත් විකල්ප පමණක් ලබා ගැනීමට,
selected
තේරීමේ ක්රමය භාවිතා කරන්න.
වාක්ය රචනා ක්රමය
මෙසේ අපි
checked ලක්ෂණය සහිත මූලද්ව්ය තෝරා ගනිමු:
$(':checked');
උදාහරණය
සෑම වරකම සලකුණු කළ පෙට්ටියක් තෝරාගත් විට, තෝරාගත් සලකුණු කළ පෙට්ටි ගණන පෙන්වමු. ඔබට පෙනෙන පරිදි, ඔබේ පළමු ක්ලික් කිරීමට පෙර, පෙරනිමිය අනුව තෝරාගත් සලකුණු කළ පෙට්ටි පෙන්වනු ඇත, එනම් දෙවන සහ හතරවන:
<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>
div {
color: green;
}
let countChecked = function() {
let n = $('input:checked').length;
$('div').text('තෝරාගත්: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
උදාහරණය
ක්ලික් කිරීමෙන්, පහළින් තෝරාගත් එක් එක් රේඩියෝ බොත්තමේ අගය පෙන්වමු:
<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>
input, label {
line-height: 1.5em;
}
$('input').on('click', function() {
$('#text').html($('input:checked').val() + ' is checked!');
});
