Мне нужно проверить checked
свойство флажка и выполнить действие на основе проверенного свойства с помощью jQuery.
Например, если установлен флажок age, тогда мне нужно показать текстовое поле для ввода возраста, иначе скройте текстовое поле.
Но следующий код возвращает false
по умолчанию:
if ($('#isAgeSelected').attr('checked'))
{
$("#txtAge").show();
}
else
{
$("#txtAge").hide();
}
Как успешно запросить checked
свойство?
Это сработало для меня:
$get("isAgeSelected ").checked == true
Где isAgeSelected
- идентификатор элемента управления.
Кроме того, @karim79 answer работает нормально. Я не уверен, что я пропустил в то время, когда я его протестировал.
Примечание. Это ответ использует 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="/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>
Использовать функцию jQuery is():
if($("#isAgeSelected").is(':checked'))
$("#txtAge").show(); // checked
else
$("#txtAge").hide(); // unchecked
$("#txtAge").toggle($("#isAgeSelected").is(':checked'))
Использование 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
}
.prop
- это разработанный способ проверки реквизита. ... ... Если вы собираетесь использовать подход .is(":checked")
, это нормально, но это не спроектированный способ сделать это с помощью jquery. право?
jQuery 1.6 +
$('#isAgeSelected').prop('checked')
jQuery 1.5 и ниже
$('#isAgeSelected').attr('checked')
Любая версия jQuery
// Assuming an event handler on a checkbox
if (this.checked)
Все кредиты относятся к Xian.
this.checked
использует прямой Javascript. Но мне нравится этот кросс-jQuery-версия ответа!
Я использую это, и это работает абсолютно нормально:
$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");
Примечание. Если флажок установлен, он вернет true в противном случае undefined, поэтому лучше проверьте значение "ИСТИНА".
Использование:
<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="/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();
}
Надеюсь, что это поможет:) - Спасибо.
$('#isAgeSelected').checked
?
Использование обработчика события Click
для свойства checkbox является ненадежным, поскольку свойство checked
может меняться во время выполнения самого обработчика событий!
В идеале вы хотите поместить свой код в обработчик события change
, например, он запускается каждый раз при изменении значения флажка (независимо от того, как это делается).
$('#isAgeSelected').bind('change', function () {
if ($(this).is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();
});
.on()
является предпочтительным методом для присоединения обработчиков событий к документу.
Я решил опубликовать ответ о том, как сделать то же самое без 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;
};
Сначала вы получаете оба элемента по их идентификатору. Затем вы назначаете checkboxe onchange
событие функцию, которая проверяет, установлен ли флажок, и соответствующим образом устанавливает свойство hidden
текстового поля возраста. В этом примере используется тернарный оператор.
Вот вам fiddle, чтобы проверить его.
Добавление
Если кросс-браузерная совместимость является проблемой, я предлагаю установить для свойства CSS display
значение none и inline.
elem.style.display = this.checked ? 'inline' : 'none';
Более медленный, но совместимый с кросс-браузером.
.hidden
не очень кросс-браузерный, хотя мне нравится это решение :)
style
. Это прискорбно, поскольку .hidden
производительность намного лучше .
Я думаю, вы могли бы сделать это:
if ($('#isAgeSelected :checked').size() > 0)
{
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
Существует много способов проверить, установлен ли флажок:
Способ проверки с помощью jQuery
if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))
Проверьте пример или документ:
Это работает для меня:
/* isAgeSelected being id for checkbox */
$("#isAgeSelected").click(function(){
$(this).is(':checked') ? $("#txtAge").show() : $("#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 { ... }
Надеюсь, это поможет вам.
Это другой способ сделать то же самое:
$(document).ready(function (){
$('#isAgeSelected').click(function() {
// $("#txtAge").toggle(this.checked);
// Using a pure CSS selector
if ($(this.checked)) {
alert('on check 1');
};
// Using jQuery is() method
if ($(this).is(':checked')) {
alert('on checked 2');
};
// // Using jQuery filter() method
if ($(this).filter(':checked')) {
alert('on checked 3');
};
});
});
<script src="/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>
$(document).ready(function() {
$('#agecheckbox').click(function() {
if($(this).is(":checked"))
{
$('#agetextbox').show();
} else {
$('#agetextbox').hide();
}
});
});
$(selector).attr('checked') !== undefined
Возвращает true
, если вход проверен и false
, если это не так.
.attr('checked')
в том, что он не всегда возвращает правильное состояние. Согласно ответу Салмана А (и, возможно, других), безопаснее использовать вместо этого .prop('checked')
. Кроме того, также можно объявить undefined
как var undefined = 'checked';
,
.prop('checked')
теперь кажется лучшим ответом. Это не было так надежно в то время, когда это было написано. Я не понимаю и не думаю, что это хорошая идея переопределить неопределенное.
Мой способ сделать это:
if ( $("#checkbox:checked").length ) {
alert("checkbox is checked");
} else {
alert("checkbox is not checked");
}
Вы можете использовать этот код:
$('#isAgeSelected').click(function(){
console.log(this.checked);
if(this.checked == true) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
});
Вы можете использовать:
if(document.getElementById('isAgeSelected').checked)
$("#txtAge").show();
else
$("#txtAge").hide();
if($("#isAgeSelected").is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();
Оба они должны работать.
Используйте это:
if ($('input[name="salary_in.Basic"]:checked').length > 0)
Если флажок установлен, длина больше нуля.
Этот пример для кнопки.
Попробуйте следующее:
<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);
}
});
});
Главный ответ не сделал этого для меня. Это произошло, хотя:
<script type="text/javascript">
$(document).ready(function(){
$("#li_13").click(function(){
if($("#agree").attr('checked')){
$("#saveForm").fadeIn();
}
else
{
$("#saveForm").fadeOut();
}
});
});
</script>
В основном, когда элемент # li_13 щелкнут, он проверяет, согласен ли элемент # (который является флажком), с помощью функции .attr('checked')
. Если это затем fadeIn элемент #saveForm, и если не fadeOut элемент saveForm.
1) Если ваша разметка HTML:
<input type="checkbox" />
attr:
$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set
Если используется prop:
$(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"
Используемый Prop:
$(element).prop("checked") // Will return true whether checked="checked"
Переключить: 0/1 или еще
<input type="checkbox" id="nolunch" />
<input id="checklunch />"
$('#nolunch').change(function () {
if ($(this).is(':checked')) {
$('#checklunch').val('1');
};
if ($(this).is(':checked') == false) {
$('#checklunch').val('0');
};
});
Хотя вы предложили решение 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.
Я использую это:
<input type="checkbox" id="isAgeSelected" value="1" /> <br/>
<input type="textbox" id="txtAge" />
$("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
if($("#checkkBoxId").is(':checked')){
alert("Checked=true");
}
или
if($("#checkkBoxId").attr('checked') == true){
alert("checked=true");
}
Я думаю, что это будет простой
$('#isAgeSelected').change(function() {
if($(this).is(":checked")) {
$('#txtAge').show();
}
else{
$('#txtAge').hide();
}
});
Я уверен, что это не какое-то откровение, но я не видел всего этого в одном примере:
Селектор для всех отмеченных флажков (на странице):
$('input[type=checkbox]:checked')
Включить jQuery из локальной файловой системы. Я использовал Google CDN, и есть также много CDN на выбор.
<script src="/jquery.min.js"></script>
Код будет выполнен, как только будет установлен флажок внутри класса mycheck
. Если установлен флажок текущего щелчка, он отключит все остальные и включит текущий. Если текущий не снят, он снова включит все флажки для перепроверки.
<script type="text/javascript">
$(document).ready(function() {
var checkbox_selector = '.mycheck input[type=checkbox]';
$(checkbox_selector).click(function() {
if ($($(this)).is(':checked')) {
// Disable all checkboxes
$(checkbox_selector).attr('disabled', 'disabled');
// Enable current one
$($(this)).removeAttr('disabled');
}
else {
// If unchecked open all checkbox
$(checkbox_selector).removeAttr('disabled');
}
});
});
</script>
Простая форма тестирования
<form method="post" action="">
<div class="mycheck">
<input type="checkbox" value="1" /> Television
<input type="checkbox" value="2" /> Computer
<input type="checkbox" value="3" /> Laptop
<input type="checkbox" value="4" /> Camera
<input type="checkbox" value="5" /> Music Systems
</div>
</form>
Экран вывода:
Я проверил в Firefox 9.0.1, что следующее действие для отслеживания состояния изменения флажка:
$("#mycheckbox").change(function() {
var value = $(this).prop("checked") ? 'true' : 'false';
alert(value);
});
Атрибут checked
input type="checkbox"
сопоставляется с свойством defaultChecked
, не с свойством checked
.
Итак, когда вы делаете что-то на странице, когда флажок установлен на uncheked, используйте вместо этого метод prop()
. Он извлекает значение свойства и изменяется по мере изменения состояния флажка.
Использование attr(
) или getAttribute
(в чистом JavaScript) в этих случаях не является правильным способом делать что-то.
если elem
является соответствующим флажком, тогда сделайте что-то подобное, чтобы извлечь значение:
elem.checked
или
$(elem).prop('checked')
$(document).ready(function()
{
$('#isAgeSelected').change(function()
{
alert( 'value =' + $('#chkSelect').attr('checked') );
});
});
<b> <input type="isAgeSelected" id="chkSelect" /> Age Check </b>
<br/><br/>
<input type="button" id="btnCheck" value="check" />
$(document).ready(function()
{
$('#btnCheck').click(function()
{
var isChecked = $('#isAgeSelected').attr('checked');
if (isChecked == 'checked')
alert('check-box is checked');
else
alert('check-box is not checked');
})
});
Ajax
function check()
{
if (isAgeSelected())
alert('check-box is checked');
else
alert('check-box is not checked');
}
function isAgeSelected()
{
return ($get("isAgeSelected").checked == true);
}
Это минимальное количество кода, я думаю, мне нужно было сделать что-то подобное. Я нашел этот метод полезным; он возвращает массив отмеченных флажков, а затем вы можете использовать их значение (это решение использует jQuery):
// This is how you get them
var output = "";
var checkedBoxes = $("DivCheckBoxesAreIn").children("input:checked");
if(checkedBoxes.length <= 0) {
alert('Please select check boxes');
return false;
};
// And this is how you use them:
checkedBoxes.each(function() {
output += this.value + ", ";
};
Печать "output" даст вам список ваших значений, разделенный запятыми.
Вот пример, включающий инициализацию show/hide для соответствия состоянию флажка при загрузке страницы ; принимая во внимание тот факт, что firefox запоминает состояние флажков при обновлении страницы, но не запоминает состояние показанных/скрытых элементов.
$(function() {
// initialise visibility when page is loaded
$('tr.invoiceItemRow').toggle($('#showInvoiceItems').attr('checked'));
// attach click handler to checkbox
$('#showInvoiceItems').click(function(){ $('tr.invoiceItemRow').toggle(this.checked);})
});
(с помощью других ответов на этот вопрос)
У меня была такая же проблема, и ни одна из опубликованных решений, похоже, не работала, и тогда я узнал, что это потому, что ASP.NET отображает элемент управления CheckBox как SPAN с INPUT внутри, поэтому идентификатор CheckBox на самом деле является идентификатором SPAN, а не INPUT, поэтому вы должны использовать:
$('#isAgeSelected input')
а не
$('#isAgeSelected')
а затем все методы, перечисленные выше, должны работать.
сеттер:
$("#chkmyElement")[0].checked = true;
Getter:
if($("#chkmyElement")[0].checked) {
alert("enabled");
} else {
alert("disabled");
}
Это был мой способ:
$('#vcGoButton').click(function () {
var buttonStatus = $('#vcChangeLocation').prop('checked');
console.log("Status is " + buttonStatus);
if (buttonStatus) {
var address = $('#vcNewLocation').val();
var cabNumber = $('#vcVehicleNumber').val();
$.get('postCabLocation.php',
{address: address, cabNumber: cabNumber},
function(data) {
console.log("Changed vehicle " + cabNumber + " location to " + address );
});
}
else {
console.log("VC go button clicked, but no location action");
}
});
Попробуйте это,
$('#isAgeSelected').click(function() {
if(this.checked){
$("#txtAge").show();
} else{
$("#txtAge").hide();
}
});
Я предпочел бы событие change
.
$('#isAgeSelected').change(function() {
$("#txtAge").toggle(this.checked);
});
Использование:
$(this).toggle($("input:checkbox", $(this))[0].checked);
Когда вы выбираете контекст, помните, что вам нужно [0], чтобы получить доступ к этому флажку.
Использование:
<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
}
})
Это может помочь, если вы хотите, чтобы требуемое действие выполнялось только при установке флажка не во время удаления проверки.
Я использую jQuery 1.11.1, и у меня были проблемы с настройкой и чтением флажка.
Наконец, я решил это двумя этими функциями:
function setCheckboxValue(checkBoxId, checked) {
if (checkBoxId && (checked === true || checked === false)) {
var elem = $('#' + checkBoxId);
if (checked === true) {
elem.attr('checked', 'checked');
} else {
elem.removeAttr('checked');
}
}
}
function isChecked(checkBoxId) {
return $('#' + checkBoxId).attr('checked') != null;
}
Он может выглядеть немного грязным, но он решает всю связанную с проводкой проблему, имеющуюся у разных типов браузеров.
Селектор возвращает несколько объектов, и он должен взять первый элемент в массиве:
// Collection
var chckremember = $("#chckremember");
// Result boolen
var ischecked=chckremember[0].checked;
if( undefined == $('#isAgeSelected').attr('checked') ) {
$("#txtAge").hide();
} else {
$("#txtAge").show();
}
Как насчет этого решения?
$("#txtAge")[
$("#isAgeSelected").is(':checked') ?
'show' :
'hide'
]();
Для более старых версий jQuery мне пришлось использовать следующие,
$('#change_plan').live('click', function() {
var checked = $('#change_plan').attr('checked');
if(checked) {
//Code
}
else {
//Code
}
});
if( undefined == $('#isAgeSelected').attr('checked') ) {
$("#txtAge").hide();
} else {
$("#txtAge").show();
}
Просто используйте его, как показано ниже.
$('#isAgeSelected').change(function() {
if ($(this).is(":checked")) { // or if($("#isAgeSelected").attr('checked') == true){
$('#txtAge').show();
} else {
$('#txtAge').hide();
}
});
$('#chk').change(function() {
(this.checked)? alert('true') : alert('false');
});
($('#chk')[0].checked)? alert('true') : alert('false');
Эта функция является альтернативной и стабильной:
$('#isAgeSelected').context.checked
(return True/False)
Пример:
if($('#isAgeSelected').context.checked){ //if Checkbox is checked then bla bla..
/*.....*/
}else{
/*.....*/
}
Если вам нужно использовать CSS-класс как селектор jQuery, вы можете сделать следующее:
$(document).ready(function () {
$('.myOptionCheckbox').change(function () {
if ($(this).prop('checked') == true) {
console.log("checked");
}
else {
console.log("unchecked");
}
});
});
Он отлично работает для checkboxes
и radioboxes
.
Если вам нужно знать, установлен ли флажок в чистом javascript
вы должны использовать этот код.
let checkbox =document.getElementById('myCheckboxId');
if(checkbox.checked) {
alert("element is checked");
} else {
alert("element is ot checked");
}
if($('#isAgeSelected').prop('checked')) {
// do your action
}
$("#isAgeSelected").prop('checked', true);
Для снятия отметки целей это может помочь:
$('#chkbox').removeAttr('checked');
$('#isAgeSelected').change(function(){ alert($('#chkSelect').attr('checked')); });