JavaScript はチェックボックス選択を実装します。

Web フロントエンド開発に精通している人なら、チェック ボックスがオンになっているかどうかを判断することがよく行われることを知っています。判断方法はたくさんありますが、開発プロセスではこれらの方法の互換性が無視されることがよくあります。そして効果が得られます。私もブロガーとして色々な方法を使っていましたが、Googleであれこれ悪い記事を見つけて後から混乱することがよくありました。今日たまたま海外のブログを見てとても分かりやすく説明されていたので、中国語に翻訳して自分の意見も加えてみようと思います。

Web 開発に従事しており、開発する Web ページにチェック ボックスがある場合は、そのチェック ボックスが現在選択されているかどうかを確認し、いくつかの条件ステートメントを実行する必要がある場合があります。チェックボックスがチェックされているかどうかを確認するには、さまざまな方法があります。

まず、ネイティブ JavaScript がこの属性をどのように決定するかを見てみましょう。 JavaScript では、要素を選択した後、要素の selected 属性を通じて、選択したチェックボックスがチェックされているかどうかを簡単に判断できます。

例を見てみましょう。ページにチェックボックスがあり、そのチェックボックスには myCheckBox などの一意の ID があります。

コードをコピーします コードは次のとおりです:

ここで、まず JavaScript を通じてこの要素を選択し、次にその selected 属性を取得します。

コードをコピーします コードは次のとおりです:

関数 checkCheckBox() {
If (document.getElementById('myCheckBox').checked) {
// console
を使用しない場合は、alert('Its Checked') に変更します。 console.log('チェック済み');
} else {
console.log('いいえ、チェックされていません');
}
}

ご覧のとおり、最初に要素を ID で選択し、チェック ボックスがオンの場合、その値は true になります。チェック ボックスがオフの場合、その値は false になります。

jQuery を使用していて、この判断を行うためにネイティブ JavaScript を使用したくない場合は、多くの方法があります:

is(':checked') を使用します

この使用法では、jQuery の is() 関数を使用します。この関数の機能は、選択した要素または要素コレクションが関数に渡した条件パラメーターを満たしているかどうかを判断することです。条件が満たされている場合は true を返し、そうでない場合は false を返します。

この関数を使用するには、要素を選択してからセレクターの値を確認する必要があります:checked このセレクターはチェックボックス、ラジオボタン、および選択タグに対して機能します。

[/コード]
$('input[type="button"]').click(function () {
If ($('#myCheckBox').is(':checked')) {
// console
を使用しない場合は、alert('Its Checked') に変更します。 console.log('チェック済み');
} else {
console.log('いいえ、チェックされていません');
}
});
[/コード]

prop() を使用する

jQuery 1.6 より前は、要素のプロパティと属性を取得するために関数 attr() が使用されていましたが、非常にわかりにくいものでした。そのため、jQuery 1.6 以降では、要素の現在のプロパティ値を取得するために新しい関数 prop() が使用されます。

しかし、その前に、まずプロパティと属性の違いを理解する必要があります。属性は、HTML タグに設定するいくつかの属性値です。これには、タグに設定するクラスと ID、さらには入力ボックスに設定する初期値も含まれます。タグに属性値を設定せずに、attr()で属性値を取得した場合は未定義となります。 prop() も要素の属性値を取得するために使用されますが、attr() との明らかな違いは、取得したい属性が html タグで定義されていない場合でも、必要な現在の属性を正しく返すことができることです。価値。

公式の推奨事項によると、true と false の 2 つの属性 (checked、selected、disabled など) を持つプロパティは prop() を使用し、その他のプロパティは attr() を使用します。

この 2 つの違いを直感的に反映するには、ページが読み込まれた直後に入力ボックスの値を変更できます。このとき、入力ボックスの値が変わっても attr を使用することがわかります。 () を使用して取得します。テキストが変更されてもプロパティ値は変わりませんが、property() で取得したプロパティ値はテキスト ボックスの内容が変更されると変更されます。

例を見てください。ここには、初期値セットといくつかの属性セットを含む入力ボックスがあります。

コードをコピーします コードは次のとおりです:

次に、JQuery コードで次のように記述します。

コードをコピーします コードは次のとおりです:

console.log('属性値は : ' $('#myTextBox').attr('value'));
console.log('プロパティ値は : ' $('#myTextBox').prop('value'));

prop() で取得した入力ボックスの値は常にその値と同期し、attr() で取得した入力ボックスの値は常に HTML タグの値に設定されることがわかります。

コードをコピーします コードは次のとおりです:

$('input[type="button"]').click(function () {
alert('属性値は : ' $('#myTextBox').attr('value'));
alert('プロパティ値は : ' $('#myTextBox').prop('value'));
});

フィルターを使用:チェック済み

var isChecked = $('#myCheckBox:checked').length > 0;
この属性の値を判定するもう一つの方法は、要素を選択する際にチェックするフィルターを追加し、取得した要素の長さから要素の属性を判定する方法です。ただし、ページ上に多数のチェックボックスのグループがあり、ID セレクターの代わりにクラス セレクターを使用すると、得られる答えが間違っている可能性があるため、この使用法はお勧めできません。

コードをコピーします コードは次のとおりです:

$('input[type="button"]').click(function () {
If ($('#myCheckBox:checked').length > 0 ) {
// console
を使用しない場合は、alert('Its Checked') に変更します。 console.log('チェック済み');
} else {
console.log('いいえ、チェックされていません');
}
});

チェック項目の選択された属性を取得する方法がいくつかあることがわかります。これはまさに、Web 開発者が頻繁に使用する必要があるものですが、正しい使用方法を選択するときに混乱します。

以上がこの記事の全内容です。JavaScript を学習する皆さんのお役に立てれば幸いです。

この記事を友達と共有したり、コメントを残してください。皆様のご支援に心より感謝申し上げます。