Как проверить, установлен ли флажок в jQuery?
Мне нужно проверить checked свойство флажка и выполнить действие, основанное на проверенном свойстве, используя jQuery.
Например, если флажок возраста установлен, то мне нужно показать текстовое поле для ввода возраста, иначе скрыть текстовое поле.
Но следующий код возвращает false по умолчанию:
if ($('#isAgeSelected').attr('checked'))
{
$("#txtAge").show();
}
else
{
$("#txtAge").hide();
}
Как мне успешно запросить checked имущество?
70 ответов
Это сработало для меня:
$get("isAgeSelected ").checked == true
куда isAgeSelected это идентификатор элемента управления.
Кроме того, ответ @karim79 отлично работает. Я не уверен, что я пропустил в то время, когда я проверял это.
Обратите внимание, это ответ использует Microsoft Ajax, а не JQuery
Как успешно запросить проверенное свойство?
checked свойство элемента DOM флажка даст вам checked состояние элемента.
Учитывая ваш существующий код, вы можете сделать это:
if(document.getElementById('isAgeSelected').checked) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
Тем не менее, есть гораздо более красивый способ сделать это, используя toggle:
$('#isAgeSelected').click(function() {
$("#txtAge").toggle(this.checked);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>Используйте функцию jQuery's ():
if($("#isAgeSelected").is(':checked'))
$("#txtAge").show(); // checked
else
$("#txtAge").hide(); // unchecked
Использование jQuery > 1.6
<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />
// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true
Используя новый метод свойства:
if($('#checkMeOut').prop('checked')) {
// something when checked
} else {
// something else when not
}
JQuery 1.6+
$('#isAgeSelected').prop('checked')
JQuery 1,5 и ниже
$('#isAgeSelected').attr('checked')
Любая версия jQuery
// Assuming an event handler on a checkbox
if (this.checked)
Весь кредит идет в Сиань.
Я использую это, и это работает абсолютно нормально:
$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");
Примечание. Если флажок установлен, он вернет значение true, в противном случае значение не определено, поэтому лучше проверьте значение "ИСТИНА".
Использование:
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned
$("#planned_checked").change(function() {
if($(this).prop('checked')) {
alert("Checked Box Selected");
} else {
alert("Checked Box deselect");
}
});
$("#planned_checked").change(function() {
if($(this).prop('checked')) {
alert("Checked Box Selected");
} else {
alert("Checked Box deselect");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> PlannedНачиная с jQuery 1.6, поведение jQuery.attr() изменился, и пользователям рекомендуется не использовать его для получения проверенного состояния элемента. Вместо этого вы должны использовать jQuery.prop():
$("#txtAge").toggle(
$("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
// Return value changes with checkbox state
);
Две другие возможности:
$("#txtAge").get(0).checked
$("#txtAge").is(":checked")
Если вы используете обновленную версию jquery, вы должны пойти на .prop Способ решения вашей проблемы:
$('#isAgeSelected').prop('checked') вернусь true если проверено и false если не проверено Я подтвердил это, и я столкнулся с этой проблемой ранее. $('#isAgeSelected').attr('checked') а также $('#isAgeSelected').is('checked') возвращается undefined что не является достойным ответом на ситуацию. Сделайте так, как указано ниже.
if($('#isAgeSelected').prop('checked')) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
Надеюсь, это поможет:)- Спасибо.
Использование:
<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad
$('input#abc').click(function(){
if($(this).is(':checked'))
{
var checkedOne=$(this).val()
alert(checkedOne);
// Do some other action
}
})
Это может помочь, если вы хотите, чтобы требуемое действие выполнялось только тогда, когда вы устанавливаете флажок, а не в тот момент, когда вы снимаете флажок.
Вы можете попробовать изменить событие флажка
$("#isAgeSelected").on('change',function(){
if($("#isAgeSelected").is(':checked'))
alert("checked");
else{
alert("unchecked");
}
});
С использованием Click обработчик события для свойства checkbox ненадежен, так как checked свойство может измениться во время выполнения самого обработчика события!
В идеале вы хотели бы поместить свой код в change обработчик события, такой как он запускается каждый раз, когда значение флажка изменяется (независимо от того, как это было сделано).
$('#isAgeSelected').bind('change', function () {
if ($(this).is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();
});
Я столкнулся с точно такой же проблемой. У меня есть флажок ASP.NET
<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />
В коде jQuery я использовал следующий селектор, чтобы проверить, был ли установлен флажок или нет, и, похоже, он работает как шарм.
if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }
Я уверен, что вы также можете использовать идентификатор вместо CssClass,
if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }
Я надеюсь, это поможет вам.
Я считаю, что вы могли бы сделать это:
if ($('#isAgeSelected :checked').size() > 0)
{
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
Я решил опубликовать ответ о том, как сделать то же самое без jQuery. Просто потому, что я бунтарь.
var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');
// Just because of IE <333
ageCheckbox.onchange = function() {
// Check if the checkbox is checked, and show/hide the text field.
ageInput.hidden = this.checked ? false : true;
};
Сначала вы получаете оба элемента по их идентификатору. Затем вы назначаете флажки onchange событие функция, которая проверяет, был ли установлен флажок и устанавливает hidden свойство текстового поля возраста соответственно. В этом примере используется троичный оператор.
Вот скрипка для вас, чтобы проверить это.
добавление
Если кросс-браузерная совместимость является проблемой, тогда я предлагаю установить CSS display собственности нет и встроенный.
elem.style.display = this.checked ? 'inline' : 'none';
Медленнее, но кросс-браузер совместим.
Вы можете использовать этот код:
$('#isAgeSelected').click(function(){
console.log(this.checked);
if(this.checked == true) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
});
Это работает для меня:
/* isAgeSelected being id for checkbox */
$("#isAgeSelected").click(function(){
$(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
Есть много способов проверить, установлен ли флажок или нет:
Способ проверить с помощью jQuery
if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))
Проверьте пример или также документ:
Это другой способ сделать то же самое:
$(document).ready(function (){
$('#isAgeSelected').click(function() {
// $("#txtAge").toggle(this.checked);
// Using a pure CSS selector
if ($(this.checked)) {
alert('on check 1');
};
// Using jQuery's is() method
if ($(this).is(':checked')) {
alert('on checked 2');
};
// // Using jQuery's filter() method
if ($(this).filter(':checked')) {
alert('on checked 3');
};
});
});<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>Использовать этот:
if ($('input[name="salary_in.Basic"]:checked').length > 0)
Длина больше нуля, если флажок установлен.
Мой способ сделать это:
if ( $("#checkbox:checked").length ) {
alert("checkbox is checked");
} else {
alert("checkbox is not checked");
}
$(selector).attr('checked') !== undefined
Это возвращает true если вход проверен и false если это не так.
Ты можешь использовать:
if(document.getElementById('isAgeSelected').checked)
$("#txtAge").show();
else
$("#txtAge").hide();
if($("#isAgeSelected").is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();
Они оба должны работать.
$(document).ready(function() {
$('#agecheckbox').click(function() {
if($(this).is(":checked"))
{
$('#agetextbox').show();
} else {
$('#agetextbox').hide();
}
});
});
1) Если ваша HTML-разметка:
<input type="checkbox" />
attr используется:
$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set
Если используется проп:
$(element).prop("checked"); // Will give you false whether or not initial value is set
2) Если ваша HTML-разметка:
<input type="checkbox" checked="checked" />// May be like this also checked="true"
attr используется:
$(element).attr("checked") // Will return checked whether it is checked="true"
Подставка используется:
$(element).prop("checked") // Will return true whether checked="checked"
Чтобы действовать при установке или снятии флажка, щелкните.
<input type="checkbox" id="customCheck1">
$('#customCheck1').click(function () {
if (this.checked == true) {
console.log('checked');
}
else {
console.log('un-checked');
}
});
EDIT: не очень хорошее выражение программирования if (boolean == true) хотя .checked свойство также может возвращать другие переменные типа.
Лучше использовать .prop("checked")вместо. Он возвращаетсяtrue а также falseтолько. Более того, вы избегаетеbool == true выражение.
Этот пример для кнопки.
Попробуйте следующее:
<input type="button" class="check" id="checkall" value="Check All" /> <input type="button" id="remove" value="Delete" /> <br/>
<input type="checkbox" class="cb-element" value="1" /> Checkbox 1 <br/>
<input type="checkbox" class="cb-element" value="2" /> Checkbox 2 <br/>
<input type="checkbox" class="cb-element" value="3" /> Checkbox 3 <br/>
$('#remove').attr('disabled', 'disabled');
$(document).ready(function() {
$('.cb-element').click(function() {
if($(this).prop('checked'))
{
$('#remove').attr('disabled', false);
}
else
{
$('#remove').attr('disabled', true);
}
});
$('.check:button').click(function()
{
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$(this).data('checked', checked);
if(checked == true)
{
$(this).val('Uncheck All');
$('#remove').attr('disabled', false);
}
else if(checked == false)
{
$(this).val('Check All');
$('#remove').attr('disabled', true);
}
});
});
Хотя вы предложили решение JavaScript для вашей проблемы (отображая textbox когда checkbox является checked), эта проблема может быть решена только с помощью CSS. При таком подходе ваша форма работает для пользователей, которые отключили JavaScript.
Предполагая, что у вас есть следующий HTML:
<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />
Вы можете использовать следующий CSS для достижения желаемой функциональности:
#show_textbox:not(:checked) + input[type=text] {display:none;}
Для других сценариев вы можете подумать о соответствующих селекторах CSS.
Главный ответ не сделал это для меня. Это сделал, хотя:
<script type="text/javascript">
$(document).ready(function(){
$("#li_13").click(function(){
if($("#agree").attr('checked')){
$("#saveForm").fadeIn();
}
else
{
$("#saveForm").fadeOut();
}
});
});
</script>
В основном, когда щелкает элемент #li_13, он проверяет, проверен ли элемент # accept (который является флажком), используя .attr('checked') функция. Если это так, то fadeIn элемента #saveForm, а если нет, то fadeOut элемента saveForm.
Я использую это:
<input type="checkbox" id="isAgeSelected" value="1" /> <br/>
<input type="textbox" id="txtAge" />
$("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();