Jak sprawdzić, czy pole wyboru jest zaznaczone w jQuery?
Muszę sprawdzić właściwość checked
checkbox i wykonać akcję na podstawie właściwości checked przy użyciu jQuery.
Na przykład, jeśli pole wyboru wiek jest zaznaczone, to muszę pokazać pole tekstowe, aby wprowadzić wiek, w przeciwnym razie Ukryj pole tekstowe.
Ale następujący kod zwraca false
domyślnie:
if ($('#isAgeSelected').attr('checked')) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
<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 selected
</div>
Jak pomyślnie odpytywać właściwość checked
?
30 answers
Jak pomyślnie odpytywać sprawdzoną właściwość?
Właściwość checked
elementu checkbox DOM da ci checked
Stan elementu.
Biorąc pod uwagę Twój istniejący kod, możesz więc zrobić to:
if(document.getElementById('isAgeSelected').checked) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
Jest jednak o wiele ładniejszy sposób, używając 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-09 02:06:27
Użyj funkcji jQuery is () :
if($("#isAgeSelected").is(':checked'))
$("#txtAge").show(); // checked
else
$("#txtAge").hide(); // unchecked
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-23 03:42:16
Using 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
Użycie nowej metody właściwości:
if($('#checkMeOut').prop('checked')) {
// something when checked
} else {
// something else when not
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-23 17:29:18
JQuery 1.6+
$('#isAgeSelected').prop('checked')
JQuery 1.5 i poniżej
$('#isAgeSelected').attr('checked')
Dowolna wersja jQuery
// Assuming an event handler on a checkbox
if (this.checked)
Wszystkie zasługi należą do Xian .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:29
Używam tego i to działa absolutnie dobrze:
$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");
Uwaga: Jeśli pole wyboru jest zaznaczone, zwróci true w przeciwnym razie niezdefiniowane, więc lepiej sprawdzić wartość "TRUE".
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-07 12:18:22
Użycie:
<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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-15 07:16:33
Od jQuery 1.6 zachowanie jQuery.attr()
zmienił się i użytkownicy są zachęcani, aby nie używać go do pobierania stanu sprawdzonego elementu. Zamiast tego powinieneś użyć jQuery.prop()
:
$("#txtAge").toggle(
$("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
// Return value changes with checkbox state
);
Dwie inne możliwości to:
$("#txtAge").get(0).checked
$("#txtAge").is(":checked")
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-30 17:10:20
To mi pomogło:
$get("isAgeSelected ").checked == true
Gdzie isAgeSelected
jest identyfikatorem kontrolki.
Uwaga, To jest odpowiedź używa Microsoft Ajax, nie jQuery
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:51
Jeśli używasz zaktualizowanej wersji jquery, musisz wybrać metodę .prop
, aby rozwiązać problem:
$('#isAgeSelected').prop('checked')
zwróci true
Jeśli zaznaczone i false
Jeśli zaznaczone. Potwierdziłem to i natknąłem się na ten problem wcześniej. $('#isAgeSelected').attr('checked')
i $('#isAgeSelected').is('checked')
powraca undefined
, co nie jest godną odpowiedzi na zaistniałą sytuację. Więc zrobić jak podano poniżej.
if($('#isAgeSelected').prop('checked')) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
Mam nadzieję, że to pomoże :) - dzięki.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-12 16:10:02
Użycie:
<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
}
})
Może to pomóc, jeśli chcesz, aby wymagane działanie było wykonywane tylko wtedy, gdy zaznaczysz pole, a nie w momencie usuwania czeku.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-29 10:25:55
Używanie procedury obsługi zdarzenia Click
dla właściwości checkbox jest zawodne, ponieważ właściwość checked
może się zmieniać podczas wykonywania samej procedury obsługi zdarzenia!
Najlepiej byłoby umieścić swój kod w obsłudze zdarzenia change
, np. jest wywoływany za każdym razem, gdy wartość pola wyboru jest zmieniana(niezależnie od jak to się robi).
$('#isAgeSelected').bind('change', function () {
if ($(this).is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-30 17:09:33
Wierzę, że możesz to zrobić:
if ($('#isAgeSelected :checked').size() > 0)
{
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-05-23 15:34:24
Postanowiłem opublikować odpowiedź, jak zrobić dokładnie to samo bez jQuery. Tylko dlatego, że jestem buntownikiem.
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;
};
Najpierw dostajesz oba elementy po ich ID. Następnie przypisujesz Zdarzenie onchange
checkboxe funkcję, która sprawdza, czy pole zostało zaznaczone i odpowiednio ustawia właściwość hidden
pola tekstowego age. W tym przykładzie za pomocą operatora trójdzielnego.
Oto skrzypce do przetestowania.
Dodatek
Jeśli problem dotyczy kompatybilności między przeglądarkami, dlatego proponuję ustawić właściwość CSS display
na none i inline.
elem.style.display = this.checked ? 'inline' : 'none';
Wolniejszy, ale kompatybilny z przeglądarkami.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-05 15:50:25
Wpadłem do tego samego problemu. Mam ASP.NET checkbox
<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />
W kodzie jQuery użyłem poniższego selektora, aby sprawdzić, czy checkbox został zaznaczony, czy nie, i wydaje się działać jak urok.
if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }
Jestem pewien, że możesz również użyć ID zamiast CssClass,
if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }
Mam nadzieję, że to ci pomoże.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-25 10:59:04
Ten kod pomoże ci
$('#isAgeSelected').click(function(){
console.log(this.checked);
if(this.checked == true) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-03 04:01:48
Istnieje wiele sposobów, aby sprawdzić, czy pole wyboru jest zaznaczone, czy nie:
Sposób sprawdzania przy użyciu jQuery
if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))
Sprawdź przykład lub dokument:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-30 17:30:42
To działa dla mnie:
/* isAgeSelected being id for checkbox */
$("#isAgeSelected").click(function(){
$(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-30 17:08:46
To jest jakaś inna metoda na zrobienie tego samego:
$(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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-30 17:34:28
Możesz spróbować zdarzenia change
checkbox, aby śledzić zmianę stanu :checked
.
$("#isAgeSelected").on('change', function() {
if ($("#isAgeSelected").is(':checked'))
alert("checked");
else {
alert("unchecked");
}
});
<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 selected
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-23 15:39:42
Użyj tego:
if ($('input[name="salary_in.Basic"]:checked').length > 0)
Długość jest większa niż zero, jeśli pole jest zaznaczone.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-16 08:51:06
Mój sposób na to:
if ( $("#checkbox:checked").length ) {
alert("checkbox is checked");
} else {
alert("checkbox is not checked");
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-06 20:52:33
$(selector).attr('checked') !== undefined
Zwraca true
Jeśli wejście jest zaznaczone i false
jeśli nie jest.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-21 11:13:00
$(document).ready(function() {
$('#agecheckbox').click(function() {
if($(this).is(":checked"))
{
$('#agetextbox').show();
} else {
$('#agetextbox').hide();
}
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-26 15:07:01
Możesz użyć:
if(document.getElementById('isAgeSelected').checked)
$("#txtAge").show();
else
$("#txtAge").hide();
if($("#isAgeSelected").is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();
Oba powinny działać.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-21 15:21:33
1) Jeśli twój znacznik HTML to:
<input type="checkbox" />
Attr używany:
$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set
Jeśli użyto prop:
$(element).prop("checked"); // Will give you false whether or not initial value is set
2) Jeśli twój znacznik HTML to:
<input type="checkbox" checked="checked" />// May be like this also checked="true"
Attr używany:
$(element).attr("checked") // Will return checked whether it is checked="true"
Użyty rekwizyt:
$(element).prop("checked") // Will return true whether checked="checked"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-30 17:25:33
Ten przykład jest dla przycisku.
Spróbuj:
<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);
}
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-02 14:17:27
/ Align = "center" bgcolor = "# e0ffe0 " / cesarz chin / / align = center / To jednak:
<script type="text/javascript">
$(document).ready(function(){
$("#li_13").click(function(){
if($("#agree").attr('checked')){
$("#saveForm").fadeIn();
}
else
{
$("#saveForm").fadeOut();
}
});
});
</script>
Zasadniczo po kliknięciu elementu # li_13 sprawdza, czy element # agree (który jest checkboxem) jest sprawdzany za pomocą funkcji .attr('checked')
. Jeżeli jest to fadeIn elementu # saveForm, a jeśli nie fadeOut elementu saveForm.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-30 17:12:04
Chociaż zaproponowałeś rozwiązanie JavaScript dla swojego problemu (wyświetlanie textbox
, Gdy checkbox
jest checked
), ten problem można rozwiązać tylko za pomocą css. Dzięki takiemu podejściu twój formularz działa dla użytkowników, którzy wyłączyli JavaScript.
Zakładając, że masz następujący HTML:
<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />
Możesz użyć następującego CSS, aby osiągnąć pożądaną funkcjonalność:
#show_textbox:not(:checked) + input[type=text] {display:none;}
W innych scenariuszach można pomyśleć o odpowiednich selektorach CSS.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-30 17:32:58
Używam tego:
<input type="checkbox" id="isAgeSelected" value="1" /> <br/>
<input type="textbox" id="txtAge" />
$("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-30 17:22:27
Toggle: 0/1 or else
<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');
};
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-05 08:48:08