Bộ chọn checked
Bộ chọn :checked chọn các phần tử,
đã được chọn, tức là những phần tử có thuộc tính
checked hoặc
selected.
Bộ chọn :checked hoạt động với hộp kiểm
(checkbox) và
nút chọn radio
(radio),
cũng như với các phần tử có thẻ
option.
Để chỉ nhận các tùy chọn đã chọn của phần tử
select,
hãy sử dụng bộ chọn
selected.
Cú pháp
Đây là cách chúng ta chọn các phần tử có
thuộc tính checked:
$(':checked');
Ví dụ
Hãy hiển thị số lượng hộp kiểm đã chọn mỗi khi một hộp kiểm được chọn. Như bạn thấy trước khi bạn nhấp chuột lần đầu, các hộp kiểm được chọn theo mặc định sẽ được hiển thị, đó là hộp thứ hai và thứ tư:
<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('Đã chọn: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
Ví dụ
Hãy hiển thị giá trị của mỗi nút radio được chọn ở phía dưới khi nhấp chuột:
<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() + ' đã được chọn!');
});
