うーん・・・

チェックボックスに入っているチェックの数により表示させるテキストを変える方法はありますか？

解決済

質問者：j1781352
質問日時：2018/08/09 09:20
回答数：2件

当てはまる項目すべてにチェックを入れて「今すぐ診断ボタン」ください。

［チェック項目］
□ 小さな不正でも、うやむやにしない方ですか。
□ 子供や部下の失敗に寛大ですか。
□ 物事の決断を苦労せずに、すばやくできますか。
□ 直感で判断する方ですか。
□ 他人の期待にそうよう、過剰な努力をしますか。
□ 子供や部下を厳しく教育しますか。
□ 相手の話に耳を傾け、共感する方ですか。
□ 能力的にテキパキ仕事を片付けていく方ですか。
□ 興にのると度をこし、はめをはずしてしまいますか。
□ 自分の感情を抑えてしまう方ですか。
□ 権利を主張する前に義務を果たしますか。
□ 怒りっぽい方ですか。
□ 劣等感が強い方ですか。

［今すぐ診断ボタン］

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

チェックボックスにチェックが入っている個数が、

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()">

どなたかご教授いただければ非常に助かります。。
宜しくお願い申し上げます。。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2018/08/09 13:27

こんにちは

すでに回答が出ているので、少し変えた感じでの一例です…
※ テキストの内容は簡略化してあります。
※ 表示方法の切り替えは、変数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>

- 1
- 件

通報する

この回答へのお礼

すごく丁寧にお教えくださって本当に大感謝です！！！！
こちらも試してみて超ビックリでした！！
正に思った通りですし、表示方法の切り替えまでつけてくださって感動しています(*‘∀‘)！！
最初に投稿してくださった方のソースも素晴らしいものでしたが表示方法の切り替えまでつけてくださったのでBAとさせていただきたく思います！！！
本当にありがとうございました(*''ω''*)！！

通報する

お礼日時：2018/08/09 14:17

No.1

回答者： yambejp
回答日時：2018/08/09 10:29

<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>