Как проверить, установлен ли флажок в блоке checkbox с помощью идентификатора блока checkbox?
Я использую следующий код, но он всегда возвращает количество отмеченных флажков независимо от идентификатора.
function isCheckedById(id) {
alert(id);
var checked = $("input[@id=" + id + "]:checked").length;
alert(checked);
if (checked == 0) {
return false;
} else {
return true;
}
}
Идентификаторы должны быть уникальными в вашем документе, что означает, что вы не должны делать это:
<input type="checkbox" name="chk[]" id="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />
Вместо этого отпустите идентификатор, а затем выберите их по имени или содержащему элемент:
<fieldset id="checkArray">
<input type="checkbox" name="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>
И теперь jQuery:
var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0;
//there should be no space between identifier and selector
// or, without the container:
var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
$('#' + id).is(":checked")
Это произойдет, если флажок установлен.
Для массива флажков с тем же именем вы можете получить список проверенных:
var $boxes = $('input[name=thename]:checked');
Затем прокрутите их и посмотрите, что вы проверили:
$boxes.each(function(){
// Do stuff here with this
});
Чтобы узнать, сколько проверок вы можете сделать:
$boxes.length;
$('#checkbox').is(':checked');
Приведенный выше код возвращает true, если флажок установлен или false, если нет.
Полезны все следующие методы:
$('#checkbox').is(":checked")
$('#checkbox').prop('checked')
$('#checkbox')[0].checked
$('#checkbox').get(0).checked
Рекомендуется, чтобы DOMelement или inline "this.checked" следует избегать, вместо этого jQuery в методе должен использоваться прослушиватель событий.
Код jQuery, чтобы проверить, установлен ли флажок:
if($('input[name="checkBoxName"]').is(':checked'))
{
// checked
}else
{
// unchecked
}
В качестве альтернативы:
if($('input[name="checkBoxName"]:checked'))
{
// checked
}else{
// unchecked
}
Самое важное понятие, которое нужно запомнить об проверяемом атрибуте, - это что он не соответствует проверенному свойству. Атрибут фактически соответствует свойству defaultChecked и должен использоваться только для установки начального значения флажка. Проверенный атрибут значение не изменяется с состоянием флажка, в то время как проверено свойство. Таким образом, совместимый с кросс-браузером способ определить, установлен ли флажок, использовать свойство
Возможны все ниже методы
elem.checked
$(elem).prop("checked")
$(elem).is(":checked")
Вы можете использовать этот код,
if($("#checkboxId").is(':checked')){
// Code in the case checkbox is checked.
} else {
// Code in the case checkbox is NOT checked.
}
В соответствии с документацией jQuery есть следующие способы проверить, установлен ли флажок. Давайте рассмотрим флажок, например (Check Work jsfiddle со всеми примерами)
<input type="checkbox" name="mycheckbox" id="mycheckbox" />
<br><br>
<input type="button" id="test-with-checked" value="Test with checked" />
<input type="button" id="test-with-is" value="Test with is" />
<input type="button" id="test-with-prop" value="Test with prop" />
Пример 1 - с отмеченным
$("#test-with-checked").on("click", function(){
if(mycheckbox.checked) {
alert("Checkbox is checked.");
} else {
alert("Checkbox is unchecked.");
}
});
Пример 2 - с jQuery есть, ПРИМЕЧАНИЕ -: отмечен
var check;
$("#test-with-is").on("click", function(){
check = $("#mycheckbox").is(":checked");
if(check) {
alert("Checkbox is checked.");
} else {
alert("Checkbox is unchecked.");
}
});
Пример 3 - с поддержкой jQuery
var check;
$("#test-with-prop").on("click", function(){
check = $("#mycheckbox").prop("checked");
if(check) {
alert("Checkbox is checked.");
} else {
alert("Checkbox is unchecked.");
}
});
Проверить работу jsfiddle
Вы можете попробовать следующее:
<script>
function checkAllCheckBox(value)
{
if($('#select_all_').is(':checked')){
$(".check_").attr ( "checked" ,"checked" );
}
else
{
$(".check_").removeAttr('checked');
}
}
</script>
<input type="checkbox" name="chkbox" id="select_all_" value="1" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
Вы можете использовать любой из следующих рекомендуемых кодов с помощью jquery.
if ( elem.checked ) {};
if ( $( elem ).prop( "checked" ) ) {};
if ( $( elem ).is( ":checked" ) ) {};
Я знаю, что OP хочет jquery, но в моем случае чистый JS был ответом, поэтому, если кто-то вроде меня здесь и не имеет jquery или не хочет его использовать, вот ответ JS:
document.getElementById("myCheck").checked
Он возвращает true, если вход с идентификатором myCheck проверен и false, если он не установлен.
Просто как тот.
Вы можете сделать это просто:
HTML
<input id="checkbox" type="checkbox" />
JQuery
$(document).ready(function () {
var ckbox = $('#checkbox');
$('input').on('click',function () {
if (ckbox.is(':checked')) {
alert('You have Checked it');
} else {
alert('You Un-Checked it');
}
});
});
или даже проще,
$("#checkbox").attr("checked") ? alert("Checked") : alert("Unchecked");
Если отмечен checkbox, он вернет true иначе undefined
Простая демонстрация для проверки и установки флажка.
$('.attr-value-name').click(function() {
if($(this).parent().find('input[type="checkbox"]').is(':checked'))
{
$(this).parent().find('input[type="checkbox"]').prop('checked', false);
}
else
{
$(this).parent().find('input[type="checkbox"]').prop('checked', true);
}
});
Просто, чтобы сказать, что в моем примере ситуация была диалоговым окном, которое затем проверило флажок перед закрытием диалога. Ничего выше и Как проверить, установлен ли флажок в jQuery? и jQuery, если флажок установлен. также не работают.
В конце
<input class="cb" id="rd" type="checkbox">
<input class="cb" id="fd" type="checkbox">
var fd=$('.cb#fd').is(':checked');
var rd= $('.cb#rd').is(':checked');
Это сработало так, чтобы вызвать класс, а затем идентификатор. а не только идентификатор. Это может быть связано с вложенными элементами DOM на этой странице, что вызывает проблему. Обходной путь был выше.
Что-то вроде этого может помочь
togglecheckBoxs = function( objCheckBox ) {
var boolAllChecked = true;
if( false == objCheckBox.checked ) {
$('#checkAll').prop( 'checked',false );
} else {
$( 'input[id^="someIds_"]' ).each( function( chkboxIndex, chkbox ) {
if( false == chkbox.checked ) {
$('#checkAll').prop( 'checked',false );
boolAllChecked = false;
}
});
if( true == boolAllChecked ) {
$('#checkAll').prop( 'checked',true );
}
}
}
Для флажка с идентификатором
<input id="id_input_checkbox13" type="checkbox"></input>
вы можете просто сделать
$("#id_input_checkbox13").prop('checked')
вы получите true или false в качестве возвращаемого значения для синтаксиса выше. Вы можете использовать его в условии if как нормальное логическое выражение.
Toggle отмечен
$("#checkall").click(function(){
$("input:checkbox").prop( 'checked',$(this).is(":checked") );
})
Собственно, согласно jsperf.com, операции DOM быстрей, затем $(). prop(), за которыми следует $(). есть()!!
Вот синтаксисы:
var checkbox = $('#'+id);
/* OR var checkbox = $("input[name=checkbox1]"); whichever is best */
/* The DOM way - The fastest */
if(checkbox[0].checked == true)
alert('Checkbox is checked!!');
/* Using jQuery .prop() - The second fastest */
if(checkbox.prop('checked') == true)
alert('Checkbox is checked!!');
/* Using jQuery .is() - The slowest in the lot */
if(checkbox.is(':checked') == true)
alert('Checkbox is checked!!');
Я лично предпочитаю .prop(). В отличие от .is(), его также можно использовать для установки значения.
Используя этот код, вы можете проверить, что по крайней мере один флажок установлен или нет в разных группах или нескольких флажках. Используя это, вы не можете требовать удаления идентификаторов или динамических идентификаторов. Этот код работает с одинаковыми идентификаторами.
Ссылка ссылки
<label class="control-label col-sm-4">Check Box 2</label>
<input type="checkbox" name="checkbox2" id="checkbox21" value=ck1 /> ck1<br />
<input type="checkbox" name="checkbox2" id="checkbox22" value=ck2 /> ck2<br />
<label class="control-label col-sm-4">Check Box 3</label>
<input type="checkbox" name="checkbox3" id="checkbox31" value=ck3 /> ck3<br />
<input type="checkbox" name="checkbox3" id="checkbox32" value=ck4 /> ck4<br />
<script>
function checkFormData() {
if (!$('input[name=checkbox2]:checked').length > 0) {
document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
return false;
}
if (!$('input[name=checkbox3]:checked').length > 0) {
document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
return false;
}
alert("Success");
return true;
}
</script>
Начиная с середины 2019 года, и jQuery иногда отходит на второй план к таким вещам, как VueJS, React и т.д.
<script>
// Replace 'admincheckbox' both variable and ID with whatever suits.
window.onload = function() {
const admincheckbox = document.getElementById("admincheckbox");
admincheckbox.addEventListener('click', function() {
if(admincheckbox.checked){
alert('Checked');
} else {
alert('Unchecked');
}
});
}
</script>
используйте код ниже
<script>
$(document).ready(function () {
$("[id$='chkSendMail']").attr("onchange", "ShowMailSection()");
}
function ShowMailSection() {
if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){
$("[id$='SecEmail']").removeClass("Hide");
}
</script>