![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
教えて下さい。
チェックボックスにチェックを入れると、idやclassで指定されている範囲をjavascriptでリアルタイムに表示させたいのですが、どのようにすればよいでしょうか?
例えば、AというチェックボックスとBというチェックボックスがあって↓
<form name="000">
<input type="checkbox" id="chk1" />チェック1
<input type="checkbox" id="chk2" />チェック2
</form>
チェックが入ると、指定した任意のid属性が表示されるようにしたいんです。
例えば、チェック1のチェックボックスにチェックが入ったら"forChk1"を、チェック2にチェックが入ったら"forChk2"みたいな。
<span id="forChk1">チェック1に関する項目</span>
<span id="forChk2">チェック2に関する項目</span>
javascriptのonClickで実現する方法になるのでしょうか?
どなたかご教授頂けると光栄ですm(_ _)m
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
イベントハンドラーをアタッチしてみました。
<script type="text/javascript">
<!--
window.onload = function () {
//@cc_on
document./*@if (1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/
'click', function (evt) {
var e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/;
if (e.type=="checkbox"){
document.getElementById("for" + e.id).style.display=e.checked?"":"none";
}
}, true);
}
// -->
</script>
No.1
- 回答日時:
非常に大雑把にやるとこんな感じ。
<style>
.hide{
display:none;
}
</style>
<script>
window.onload=function(){
var tags=document.getElementsByTagName("input");
for(var i=0;i<tags.length;i++){
if(tags[i].type=="checkbox" && tags[i].id.match(/^chk[0-9]+$/)){
tags[i].onclick=function(){
document.getElementById("for"+this.id).className=this.checked?"":"hide";
}
}
}
}
</script>
<form>
<input type="checkbox" id="chk1" />チェック1
<input type="checkbox" id="chk2" />チェック2
</form>
<span id="forchk1" class="hide">チェック1に関する項目</span>
<span id="forchk2" class="hide">チェック2に関する項目</span>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- Excel(エクセル) スプレッドシートのチェックボックスとフィルタを連携させたい 2 2022/09/26 18:02
- JavaScript jsで質問です。 ボタンが二つ存在し、両方のボタンがクリックされたことをチェックしたいのですが、どの 4 2022/11/22 10:30
- Visual Basic(VBA) エクセルでフォームのチェックボックスを使用した日付表示切替を作りたい 3 2023/07/11 10:47
- Access(アクセス) Accessで予定表を作成しようとしてます。 テーブル フィールド名 連番 オートナンバー型 年月日 2 2023/07/23 11:40
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
javascriptテキストBOX色を元に...
-
checkboxにチェックを入れると...
-
jqueryで要素の中身を要素の外...
-
dblclickでdiv要素を一回だけ作...
-
IFRAMEの表示/非表示を切り替え...
-
removeAttribute()メソッドで削...
-
ダブルクォーテーションが消え...
-
【HP作成】クリックすると下...
-
背景色を透明化
-
取得した要素がインライン要素...
-
【javascript】document.getEle...
-
javascriptがChromeで機能しません
-
Gif画像のアニメーションが再生...
-
js ぽっぷあっぷ?
-
iframe内のリンクが飛ばないの...
-
ラジオボタンの切替で表示する...
-
jTweetsAnywhereでハッシュタグ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
console.log結果をhtmlで表示し...
-
iframe内のリンクが飛ばないの...
-
変数内容をHTML内で表示する方法
-
getElementByIdの戻り値がnull...
-
背景色を透明化
-
自働生成される<div>タグに連番...
-
クリックで色変更後に既に変更...
-
複数のリンク画像を一定時間で...
-
removeEventListenerについて
-
IFRAMEの表示/非表示を切り替え...
-
表示・非表示のスクリプトで、...
-
タブで開いてさらにタブ内をア...
-
Jquery 親要素で順番入れ替え
-
VBScriptでXMLのデータを取得す...
-
[急ぎ] videoタグで埋め込んだm...
-
HTML id名とjavascript変数名
おすすめ情報