JavaScript/jQueryを使用してラジオボタンのチェックを外すにはどうすればよいですか?

WBOY
リリース: 2023-08-31 10:25:02
転載
852 人が閲覧しました

JavaScript/jQueryを使用してラジオボタンのチェックを外すにはどうすればよいですか?

JavaScript または JQuery を使用してラジオ ボタンのチェックを外す必要がある場合があります。たとえば、フォームではラジオ ボタンを使用します。ユーザーがフォームのクリア ボタンを押したら、すべてのラジオ ボタンのチェックを外し、再度ユーザーがラジオ ボタンからオプションを選択できるようにする必要があります。

このチュートリアルでは、JQuery または JavaScript を使用して 1 つまたは複数のラジオ ボタンのチェックを外すさまざまな方法を学習します。

JavaScript を使用してラジオ ボタンのチェックを外します

ID、タグ、名前、またはその他の手段を使用して、JavaScript のラジオ ボタンにアクセスできます。その後、false のブール値を割り当てることで、ラジオ ボタンの selected プロパティのチェックを外すことができます。

###文法###

ユーザーは、以下の構文に従って、checked 属性を使用してラジオ ボタンのチェックを外すことができます。

リーリー

上記の構文では、radio は JavaScript を使用してアクセスされるラジオ ボタンです。

例 1

以下の例では、ラジオ ボタンを作成します。ユーザーはラジオ ボタンをクリックしてチェックできます。その後、ユーザーがボタンをクリックすると、clearRadio() 関数が呼び出されます。

clearRadio() 関数では、ラジオ入力の ID を使用してアクセスします。次に、ラジオ入力の選択されたプロパティにアクセスし、ラジオ ボタンのチェックを外すために false のブール値を割り当てます。

リーリー

上記の出力では、[ラジオのチェックを解除] ボタンが押されるたびにラジオ入力がクリアされることがわかります。

JQueryを使用したラジオボタンのチェックを外します

JQuery を使用して無線入力をクリアすることもできます。 JQuery では、prop() メソッドを使用して HTML 要素に任意の属性を設定できます。 prop() メソッドは、プロパティ名とプロパティ値の 2 つの値をパラメータとして受け取ります。

ここでは、JQuery を使用して特定のラジオ ボタンのチェックを外すために、プロパティ名として「checked」を渡し、プロパティ値として false を渡します。

###文法###

ユーザーは、次の構文を使用して、JQuery の prop() メソッドを使用してラジオ ボタンのチェックを外すことができます。

リーリー

上記の構文では、「checked」属性名を最初のパラメーターとして渡し、false 属性値を 2 番目のパラメーターとして渡します。

例 2

以下の例では、ラジオ ボタンを作成します。ボタン上でクリック イベントが発生すると、prop() メソッドを使用して選択されたプロパティに false 値を設定することにより、ラジオ ボタンがクリアされます。

リーリー

例 3

以下の例では、複数の無線入力を作成し、グループ化しました。したがって、ユーザーは 4 つの無線入力すべてからいずれかを選択できます。ユーザーがボタンをクリックすると、すべての無線入力がクリアされます。

ここでは、タイプと名前によって無線入力にアクセスします。したがって、ユーザーがグループから無線入力を選択した場合でも、そのチェックは外されます。

リーリー

必要に応じて JavaScript と jQuery を使用して無線入力をクリアする方法を学びました。また、ユーザーがフォームを送信するときに無線入力をクリアする必要があります。ユーザーは、タイプと名前でラジオ ボタン グループにアクセスし、単一グループのすべてのラジオ ボタンをクリアできます。

以上がJavaScript/jQueryを使用してラジオボタンのチェックを外すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:tutorialspoint.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート