проверка - Как проверить, установлен ли флажок в jQuery?
проверка radio jquery (20)
Как успешно запросить проверенное свойство?
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>
https://code.i-harness.com
Мне нужно проверить checked
свойство флажка и выполнить действие на основе проверенного свойства с помощью jQuery.
Например, если установлен флажок age, тогда мне нужно показать текстовое поле для ввода возраста, иначе скройте текстовое поле.
Но следующий код возвращает false
по умолчанию:
if ($('#isAgeSelected').attr('checked'))
{
$("#txtAge").show();
}
else
{
$("#txtAge").hide();
}
Как успешно запросить checked
свойство?
Вы можете использовать этот код:
$('#isAgeSelected').click(function(){
console.log(this.checked);
if(this.checked == true) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
});
Если вы используете обновленную версию jquery, вы должны обратиться за помощью .prop
для решения вашей проблемы:
$('#isAgeSelected').prop('checked')
вернет true
если отмечено, и false
если не отмечен. Я подтвердил это, и я столкнулся с этим вопросом ранее. $('#isAgeSelected').attr('checked')
и $('#isAgeSelected').is('checked')
возвращает undefined
что не является достойным ответом на ситуацию. Сделайте так, как указано ниже.
if($('#isAgeSelected').prop('checked')) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
Надеюсь, это поможет:) - Спасибо.
Есть много способов проверить, установлен ли флажок или нет:
Способ проверки с помощью jQuery
if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))
Пример проверки или документ:
Использование обработчика событий Click
для свойства checkbox является ненадежным, поскольку свойство checked
может меняться во время выполнения самого обработчика события!
В идеале вы хотите поместить свой код в обработчик события change
например, он запускается каждый раз при изменении значения флажка (независимо от того, как это делается).
$('#isAgeSelected').bind('change', function () {
if ($(this).is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();
});
Использование:
<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's is() :
if($("#isAgeSelected").is(':checked'))
$("#txtAge").show(); // checked
else
$("#txtAge").hide(); // unchecked
Мой способ сделать это:
if ( $("#checkbox:checked").length ) {
alert("checkbox is checked");
} else {
alert("checkbox is not 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');
};
});
Ты можешь использовать:
if(document.getElementById('isAgeSelected').checked)
$("#txtAge").show();
else
$("#txtAge").hide();
if($("#isAgeSelected").is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();
Оба они должны работать.
Это другой способ сделать то же самое:
$(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>
Это работает для меня:
/* isAgeSelected being id for checkbox */
$("#isAgeSelected").click(function(){
$(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
Этот пример для кнопки.
Попробуйте следующее:
<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);
}
});
});
Я думаю, что это будет простой
$('#isAgeSelected').change(function() {
if($(this).is(":checked")) {
$('#txtAge').show();
}
else{
$('#txtAge').hide();
}
});
Я использую это:
<input type="checkbox" id="isAgeSelected" value="1" /> <br/>
<input type="textbox" id="txtAge" />
$("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#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
checkboxe функцией, которая проверяет, был ли установлен флажок, и соответствующим образом задает hidden
свойство текстового поля возраста. В этом примере используется тернарный оператор.
Вот fiddle для вас, чтобы проверить ее.
добавление
Если кроссбраузерная совместимость является проблемой, я предлагаю установить свойство display
CSS в none и inline .
elem.style.display = this.checked ? 'inline' : 'none';
Медленнее, но совместимо с несколькими браузерами.
Я считаю, вы могли бы сделать это:
if ($('#isAgeSelected :checked').size() > 0)
{
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
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"
$(document).ready(function() {
$('#agecheckbox').click(function() {
if($(this).is(":checked"))
{
$('#agetextbox').show();
} else {
$('#agetextbox').hide();
}
});
});
$(selector).attr('checked') !== undefined
Это возвращает true
если вход проверен и false
если это не так.