チェックボックスがjQueryでチェックされているかどうかを確認するにはどうすればいいですか？
チェックボックスのcheckedプロパティをチェックし、チェックされたプロパティに基づいてjQueryを使ってアクションを実行する必要があります。
たとえば、年齢チェックボックスがチェックされている場合、年齢を入力するためにテキストボックスを表示する必要があります。そうでない場合は、テキストボックスを非表示にします。
しかし、次のコードはデフォルトでfalseを返します。
if ($('#isAgeSelected').attr('checked'))
{
$("#txtAge").show();
}
else
{
$("#txtAge").hide();
}
checkedプロパティを正しく照会する方法を教えてください。
これは私のために働いた：
$get("isAgeSelected ").checked == true
isAgeSelectedはコントロールのIDです。
@ karim79の answer も問題なく動作します。テストしたときに見逃したことがよくわかりません。
注意、これはjQueryではなくMicrosoft Ajaxを使用した答えです
Checkedプロパティを正しく問い合わせるにはどうすればいいですか？
チェックボックスDOM要素のcheckedプロパティは、要素の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の is（） functionを使用してください。
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、それ以外の場合は未定義を返しますので、 "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"> PlannedJQuery 1.6以降、 jQuery.attr() の振る舞いが変わり、ユーザーは要素のチェック状態を取得するためにそれを使わないことをお勧めします。代わりに、 jQuery.prop() を使用してください。
$("#txtAge").toggle(
$("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
// Return value changes with checkbox state
);
他に2つの可能性があります。
$("#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();
}
それが役立つことを願っています：） - ありがとう。
Clickプロパティはイベントハンドラ自体の実行中に変更される可能性があるため、checkboxプロパティにcheckedイベントハンドラを使用することは信頼できません。
理想的には、チェックボックスの値が変更されるたびに起動されるようなコードをchangeイベントハンドラに入れたい（ how とは無関係）。
$('#isAgeSelected').bind('change', function () {
if ($(this).is(':checked'))
$("#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;
};
まず、両方の要素をそれらのIDで取得します。次に、チェックボックスのonchangeイベントに、チェックボックスがチェックされたかどうかをチェックし、ageテキストフィールドのhiddenプロパティを適切に設定する関数を割り当てます。その例では、三項演算子を使用しています。
これが フィドルです あなたがそれをテストするための/です。
補遺
ブラウザ間の互換性が問題になる場合は、CSSのdisplayプロパティをnoneおよびinlineに設定することをお勧めします。
elem.style.display = this.checked ? 'inline' : 'none';
遅いですがクロスブラウザ互換です。
つかいます：
<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
}
})
チェックボックスをオフにしたときではなく、チェックボックスをオンにしたときにのみ必要な操作を実行する必要がある場合は、これが役立ちます。
私はあなたがこれをすることができると思います：
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'))
例を確認するか、または文書を確認してください。
私はまったく同じ問題に遭遇しました。 ASP.NETチェックボックスがあります
<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />
JQueryコードでは、チェックボックスがチェックされているかどうかをチェックするために次のセレクタを使用しました。
if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }
CssClassの代わりにIDを使うこともできると思います、
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'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();
});
これを使って：
if ($('input[name="salary_in.Basic"]:checked').length > 0)
チェックボックスがオンの場合、長さはゼロより大きいです。
このコードを使うことができます：
$('#isAgeSelected').click(function(){
console.log(this.checked);
if(this.checked == true) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
});
私のやり方は次のとおりです。
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="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')関数を使って要素＃agree（チェックボックス）がチェックされているかどうかチェックします。それが#saveForm要素であればfadeInで、そうでなければsaveForm要素。
あなたはあなたの問題に対して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();
切り替え：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');
};
});
私はそれが単純なものになると思います
$('#isAgeSelected').change(function() {
if($(this).is(":checked")) {
$('#txtAge').show();
}
else{
$('#txtAge').hide();
}
});
私はそれがいくつかの啓示ではないと確信しています、しかし私は一例でそれを全部見ませんでした：
（ページ上の）チェックされているすべてのチェックボックスを選択します。
$('input[type=checkbox]:checked')
if($("#checkkBoxId").is(':checked')){
alert("Checked=true");
}
または
if($("#checkkBoxId").attr('checked') == true){
alert("checked=true");
}
ローカルファイルシステムからjQueryをインクルードします。私はGoogleの _ cdn _ を使いました、そして選ぶべきCDNもたくさんあります。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/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>
出力画面：
input type="checkbox"のchecked属性はdefaultCheckedプロパティに、notはcheckedプロパティにそれぞれマップされます。
チェックボックスがチェックされていないときにページ内で何かをするときは、代わりにprop()メソッドを使用してください。プロパティ値を取得し、チェックボックスの状態が変化すると変化します。
このような場合にattr(）またはgetAttribute（純粋なJavaScriptの場合）を使用するのは適切な方法ではありません。
elemが問題のチェックボックスである場合は、値を取得するために次のようにします。
elem.checked
または
$(elem).prop('checked')
Firefox 9.0.1で、チェックボックスの変更後の状態を把握するために次のことが機能することを確認しました。
$("#mycheckbox").change(function() {
var value = $(this).prop("checked") ? 'true' : 'false';
alert(value);
});
自動化
$(document).ready(function()
{
$('#isAgeSelected').change(function()
{
alert( 'value =' + $('#chkSelect').attr('checked') );
});
});
HTML
<b> <input type="isAgeSelected" id="chkSelect" /> Age Check </b>
<br/><br/>
<input type="button" id="btnCheck" value="check" />
jQuery
$(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」を印刷すると、値のカンマ区切りリストが表示されます。
私は同じ問題を抱えていて、投稿されたソリューションはどれもうまくいかないようでした、そしてそれから、ASP.NETがCheckBoxコントロールを内部にINPUTを持つSPANとしてレンダリングするのでINPUTなので、次のものを使うべきです：
$('#isAgeSelected input')
のではなく
$('#isAgeSelected')
そして上記のすべての方法でうまくいくはずです。
これは初期化を含む例で、表示/非表示はページ読み込みのときのチェックボックスの状態と一致します。 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);})
});
（この質問に対する他の回答の助けを借りて）
これは私の回避策でした：
$('#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').change(function() {
if ($(this).is(":checked")) { // or if($("#isAgeSelected").attr('checked') == true){
$('#txtAge').show();
} else {
$('#txtAge').hide();
}
});
つかいます：
$(this).toggle($("input:checkbox", $(this))[0].checked);
コンテキスト外を選択している場合、チェックボックスにアクセスするには[0]が必要です。
純粋な JavaScript ：を使う
let checkbox = document.getElementById('checkboxID');
if(checkbox.checked) {
alert('is checked');
} else {
alert('not checked yet');
}
セッター：
$("#chkmyElement")[0].checked = true;
ゲッター：
if($("#chkmyElement")[0].checked) {
alert("enabled");
} else {
alert("disabled");
}
私は実際にはchangeイベントを好むでしょう。
$('#isAgeSelected').change(function() {
$("#txtAge").toggle(this.checked);
});
これを試して、
$('#isAgeSelected').click(function() {
if(this.checked){
$("#txtAge").show();
} else{
$("#txtAge").hide();
}
});
私は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'
]();
あなたはこのコードを試すことができます：
$('#isAgeSelected').click(function(){
console.log(this.checked);
if(this.checked == true) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
});
チェックボックスのチェックされたプロパティをチェックし、チェックされたプロパティに基づいてjQueryを使ってアクションを実行する必要があります。
E.X -
1）年齢チェックボックスがチェックされている場合、チェックボックスの値を取得するためにロード時に実行します、それから私は年齢を入力するためにテキストボックスを表示する必要があります。
2）年齢チェックボックスがチェックされている場合、年齢を入力するためのテキストボックスを表示する必要があります。そうでない場合、チェックボックスのクリックイベントを使用してテキストボックスを非表示にします。
そのため、コードはデフォルトでfalseを返しません。
以下を試してください。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>Jquery Demo</h1>
<input type="checkbox" name="isAge" checked id="isAge"> isAge <br/>
<div id="Age" style="display:none">
<label>Enter your age</label>
<input type="number" name="age">
</div>
<script type="text/javascript">
if(document.getElementById('isAge').checked) {
$('#Age').show();
} else {
$('#Age').hide();
}
$('#isAge').click(function() {
if(document.getElementById('isAge').checked) {
$('#Age').show();
} else {
$('#Age').hide();
}
});
</script>
</body>
</html>
これは修正版です： https://jsfiddle.net/sedhal/0hygLtrz/7/
チェックボックスが純粋なjavascriptでチェックされているかどうかを知る必要がある場合は、このコードを使うべきです。
let checkbox =document.getElementById('myCheckboxId');
if(checkbox.checked) {
alert("element is checked");
} else {
alert("element is ot checked");
}
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();
}
$('#chk').change(function() {
(this.checked)? alert('true') : alert('false');
});
($('#chk')[0].checked)? alert('true') : alert('false');
CSSクラスをjQueryセレクタとして使用する必要がある場合は、次のようにします。
$(document).ready(function () {
$('.myOptionCheckbox').change(function () {
if ($(this).prop('checked') == true) {
console.log("checked");
}
else {
console.log("unchecked");
}
});
});
これはcheckboxesとradioboxesにもうまく働きます。
この機能は代替的で安定しています。
$('#isAgeSelected').context.checked
(return True/False)
例：
if($('#isAgeSelected').context.checked){ //if Checkbox is checked then bla bla..
/*.....*/
}else{
/*.....*/
}
純粋なjsチェックボックスの状態は読みやすい
isAgeSelected.checked
function check() {
txtAge.style.display= isAgeSelected.checked ? 'block':'none';
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Age <input type="checkbox" id="isAgeSelected"/>
<button onclick="check()">Check</button>
<div id="txtAge" style="display:none">
Age is selected
</div>if($('#isAgeSelected').prop('checked')) {
// do your action
}
以下のコードを試して、チェックボックスがチェックされているかどうかを確認してください
$(document).ready(function(){
$("#isAgeSelected").on('change',function(){
if($("#isAgeSelected").is(':checked'))
$("#txtAge").show(); // checked
else{
$("#txtAge").hide(); // unchecked
}
});
;））;