当てはまる項目すべてにチェックを入れて「今すぐ診断ボタン」ください。
[チェック項目]
□ 小さな不正でも、うやむやにしない方ですか。
□ 子供や部下の失敗に寛大ですか。
□ 物事の決断を苦労せずに、すばやくできますか。
□ 直感で判断する方ですか。
□ 他人の期待にそうよう、過剰な努力をしますか。
□ 子供や部下を厳しく教育しますか。
□ 相手の話に耳を傾け、共感する方ですか。
□ 能力的にテキパキ仕事を片付けていく方ですか。
□ 興にのると度をこし、はめをはずしてしまいますか。
□ 自分の感情を抑えてしまう方ですか。
□ 権利を主張する前に義務を果たしますか。
□ 怒りっぽい方ですか。
□ 劣等感が強い方ですか。
[今すぐ診断ボタン]
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
チェックボックスにチェックが入っている個数が、
0~3個:「診断」をクリックで予め準備してあるテキストAを表示
4~6個:「診断」をクリックで予め準備してあるテキストBを表示
7~9個:「診断」をクリックで予め準備してあるテキストCを表示
10個以上:「診断」をクリックで予め準備してあるテキストDを表示
<div id="textA">テキストAテキストAテキストAテキストA</div>
<div id="textB">テキストBテキストBテキストBテキストB</div>
<div id="textC">テキストCテキストCテキストCテキストC</div>
<div id="textD">テキストDテキストDテキストDテキストD</div>
↑
上記のようなことはjavascriptで実現可能でしょうか?
診断結果のテキスト表示位置は、[今すぐ診断ボタン]が無くなって同じ場所に表示されるパターンと、ダイアログ(※ダイアログ例)っぽい感じで表示されるパターンの2パターンが知りたいのですが、検索しても探し出せませんでした…。
(※ダイアログ例)
<script type="text/javascript">
function disp(){
window.alert('診断結果のテキストです。');
}
</script>
<input type="button" value="今すぐ診断" onClick="disp()">
どなたかご教授いただければ非常に助かります。。
宜しくお願い申し上げます。。
No.1
- 回答日時:
<script>
window.addEventListener('DOMContentLoaded', function(e){
document.querySelector('#btn').addEventListener('click',function(e){
var l=document.querySelectorAll('.c:checked').length;
var msgs=[
"テキストAテキストAテキストAテキストA",
"テキストBテキストBテキストBテキストB",
"テキストCテキストCテキストCテキストC",
"テキストDテキストDテキストDテキストD",
];
var num=0;
if(l>3) num++;
if(l>6) num++;
if(l>9) num++;
document.querySelector('#view').textContent=msgs[num];//おきかえる
alert(msgs[num]);//ダイアログ
});
});
</script>
<label><input type="checkbox" class="c"> 小さな不正でも、うやむやにしない方ですか。</label><br>
<label><input type="checkbox" class="c"> 子供や部下の失敗に寛大ですか。</label><br>
<label><input type="checkbox" class="c"> 物事の決断を苦労せずに、すばやくできますか。</label><br>
<label><input type="checkbox" class="c"> 直感で判断する方ですか。</label><br>
<label><input type="checkbox" class="c"> 他人の期待にそうよう、過剰な努力をしますか。</label><br>
<label><input type="checkbox" class="c"> 子供や部下を厳しく教育しますか。</label><br>
<label><input type="checkbox" class="c"> 相手の話に耳を傾け、共感する方ですか。</label><br>
<label><input type="checkbox" class="c"> 能力的にテキパキ仕事を片付けていく方ですか。</label><br>
<label><input type="checkbox" class="c"> 興にのると度をこし、はめをはずしてしまいますか。</label><br>
<label><input type="checkbox" class="c"> 自分の感情を抑えてしまう方ですか。</label><br>
<label><input type="checkbox" class="c"> 権利を主張する前に義務を果たしますか。</label><br>
<label><input type="checkbox" class="c"> 怒りっぽい方ですか。</label><br>
<label><input type="checkbox" class="c"> 劣等感が強い方ですか。</label><br>
<div id="view">
<input type="button" value="今すぐ診断ボタン" id="btn">
</div>
本当にありがとうございます!!!
このソースを試してみてびっくりしました(;゚Д゚)!!
本当に素直にすごいと思いました!
私が考えた通りのプログラムです!
もっと勉強しなきゃ…ともおもいました、本当にありがとうございました!!
No.2ベストアンサー
- 回答日時:
こんにちは
すでに回答が出ているので、少し変えた感じでの一例です…
※ テキストの内容は簡略化してあります。
※ 表示方法の切り替えは、変数DisplaySwitchの値で可能。
※ 診断ボタンを押した後は、チェック内容の変更はできなくなります。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
h4, ul{ margin: 0; }
#questions{
list-style-type: none;
line-height: 1.4em; padding: 0.5em 1.5em;
}
#questions li{ position: relative; }
#questions li::before{
display:inline-block;
content:"";
font-size: 0.7em; margin-right: 0.8em;
width:1em; height:1em; border:1px solid black;
}
#questions li.checked::after{
content: "";
position: absolute; top: 0.2em; left: 0;
font-size: 0.7em; width: 1.1em; height: 0.5em;
border: 1px solid #D34; border-width: 0 0 2px 4px;
transform: rotate(-45deg);
}
#result{ margin-top: 1em; }
#result>p{ display: none; }
</style>
</head>
<body>
<h4>チェック項目</h4>
<ul id="questions">
<li>設問1</li>
<li>設問2</li>
<li>設問3</li>
<li>設問4</li>
<li>設問5</li>
<li>設問6</li>
<li>設問7</li>
<li>設問8</li>
<li>設問9</li>
<li>設問10</li>
<li>設問11</li>
<li>設問12</li>
<li>設問13</li>
</ul>
<div id="result">
<input type="button" value=" 診断 " />
<p>テキストAテキストA</p>
<p>テキストBテキストB</p>
<p>テキストCテキストC</p>
<p>テキストDテキストD</p>
</div>
<script type="text/javascript">
var DisplaySwitch = 0; //← 0:HTML表示、1:アラート表示
document.getElementById("questions").addEventListener("click",function(e){
if(this.classList.contains("disabled")) return;
var t = e.target;
if(t.nodeName=="LI") t.classList.toggle("checked");
}, false);
document.querySelector("#result>input").addEventListener("click",function(e){
var i = 0, n = document.querySelectorAll("#questions li.checked").length;
while(i<4 && n > [3,6,9][i]) i++;
e.target.style.display = "none";
document.querySelector("#questions").classList.add("disabled")
var elm = document.querySelectorAll("#result>p")[i];
if(DisplaySwitch) alert(elm.textContent); else elm.style.display = "block";
}, false);
</script>
</body>
</html>
すごく丁寧にお教えくださって本当に大感謝です!!!!
こちらも試してみて超ビックリでした!!
正に思った通りですし、表示方法の切り替えまでつけてくださって感動しています(*‘∀‘)!!
最初に投稿してくださった方のソースも素晴らしいものでしたが表示方法の切り替えまでつけてくださったのでBAとさせていただきたく思います!!!
本当にありがとうございました(*''ω''*)!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Access(アクセス) Accessで予定表を作成しようとしてます。 テーブル フィールド名 連番 オートナンバー型 年月日 2 2023/07/23 11:40
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript 読み込んだQRコードをフォームに受け渡したい 1 2023/05/18 11:18
- JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ 1 2022/05/20 11:16
- Access(アクセス) Accessテーブルの結合で別々のテーブルのフィールドを組み合わせて値を出す方法について 2 2022/07/20 19:43
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- Access(アクセス) Access 複数条件検索の設定が上手く行きません 1 2022/07/22 20:37
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- フリーソフト libreoffice drawのツールバーのチェックが外れてしまう 1 2022/10/04 22:02
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
文字と数字が混在する要素のsor...
-
ホームページビルダー15 メニュ...
-
プルダウンメニュー連動後の処...
-
jqueryアコーディオンのマウス...
-
JQueryで、liタグの背景に色を...
-
ツリーメニューについて
-
jqueryプルダウンメニュー個別着色
-
javascript テキストエリアを1...
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
画像の上に画像リンクを貼る方法
-
スライダーを実装した場合、ペ...
-
背景色を一定時間ごとにランダ...
-
文字を固定したいのですが…
-
javascriptでURLにマウスオーバー
-
[急ぎ] videoタグで埋め込んだm...
-
離れた場所にマウスオーバーで...
-
c++std::string型をTCHARに変換...
-
タブで開いてさらにタブ内をア...
-
1行で左寄せと右寄せと中央揃え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
javascriptでEnterキーをtabキ...
-
クリックした<a>タグのみにClas...
-
チェックボックスに入っている...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
「jQuery」アコーディオンメニ...
-
jQueryで、リンクURLの一致を確...
-
jQueryのeqで最後からn番目以降...
-
ネストされたチェックボックス...
-
javascriptで、クリックしたら...
-
onmouseoverの表示切り替えが上...
-
文字と数字が混在する要素のsor...
-
jQueryでネスト構造の<li>がク...
-
タブメニューを上下に設置
-
<li></li>の数を制限
-
jQuery多層式アコーディオンメ...
-
どの<li><a> が押されたか判別...
-
CSSとJavaScriptを使ってドロッ...
-
複数の画像をランダム(シャッ...
おすすめ情報