-2
私はこのコードを使用しています。このコードでは、ユーザーが特定のチェックボックスをクリックし、その入力に基づいてさまざまな回答を出力します。よりスマートな方法JS
私はJavaScriptにはあまり新しくないので、私は学ぶためにいくつかのケースに挑戦しようとしています。私はかなり、このJSコードを行うスマートな方法があると確信していますが、私はどのように確かではありません。
あなたは必ずしも正しいコード方法を実行する必要はありませんが、私はこの方向性をどの方向に行うべきかについて教えてください。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.hide {
display: none; //add this property
}
</style>
</head>
<body>
<div class="decider hide">
<p style="font-size:18px;color:#000;">Hvilken bolig bor du i?</p>
<label class="checkbox">
<input id="egetHus" type="checkbox" name="Request" value="Request" />
Eget hus/rækkehus </label>
<label class="checkbox">
<input id="lejetHus" type="checkbox" name="Download" value="Download" />
Lejet hus/rækkehus</label>
<label class="checkbox">
<input id="lejlighed" type="checkbox" name="test" value="test" />
Ejer-/lejet lejlighed</label>
<label class="checkbox">
<input id="fritidshus" type="checkbox" name="test1" value="test1" />
Fritidshus</label>
<br />
<p style="font-size:18px;color:#000;">Har du børn?</p>
<label class="checkbox">
<input id="hjemmeboendeBoern" type="checkbox" name="Request" value="Request" />
Hjemmeboende børn</label>
<label class="checkbox">
<input id="udeboendeBoern" type="checkbox" name="Download" value="Download" />
Udeboende børn</label>
<br />
<p style="font-size:18px;color:#000;">Hvilket transportmidler har du?</p>
<label class="checkbox">
<input id="bil" type="checkbox" name="Request" value="Request" />
Bil</label>
<label class="checkbox">
<input id="motorcykel" type="checkbox" name="Download" value="Download" />
Motorcykel</label>
<label class="checkbox">
<input id="knallert" type="checkbox" name="test" value="test" />
Knallert</label>
<label class="checkbox">
<input id="cykel" type="checkbox" name="test1" value="test1" />
Cykel</label>
<br />
<span class="select">
<input type="button" id="send-decide" alt="submit" value="select" />
</span>
</div>
<!-- VISIBLE IF CHECKED -->
<div class="egetHus">
<p>this is first box</p>
</div>
<div class="lejetHus">
<p>this is second box</p>
</div>
<div class="lejlighed">
<p>this is third box</p>
</div>
<div class="fritidshus">
<p>this is fourth box</p>
</div>
<div class="hjemmeboendeBoern">
<p>this is fifth box</p>
</div>
<div class="udeboendeBoern">
<p>this is sixth box</p>
</div>
<div class="bil">
<p>this is sixth box</p>
</div>
<div class="motorcykel">
<p>this is sixth box</p>
</div>
<div class="knallert">
<p>this is sixth box</p>
</div>
<div class="cykel">
<p>this is sixth box</p>
</div>
<script>
$(function() {
$('.decider').removeClass('hide');
$('.egetHus,.lejetHus,.lejlighed,.fritidshus,.hjemmeboendeBoern,.udeboendeBoern,.bil,.motorcykel,.knallert,.cykel').addClass('hide'); //add hide to both the class
$("#send-decide").click(function() {
if ($('input[type="checkbox"]:checked').length) {
$('.decider ').addClass('hide');
if ($('#egetHus').is(':checked')) {
$('.egetHus').removeClass('hide');
}
if ($('#lejetHus').is(':checked')) {
$('.lejetHus').removeClass('hide');
}
if ($('#lejlighed').is(':checked')) {
$('.lejlighed').removeClass('hide');
}
if ($('#fritidshus').is(':checked')) {
$('.fritidshus').removeClass('hide');
}
if ($('#hjemmeboendeBoern').is(':checked')) {
$('.hjemmeboendeBoern').removeClass('hide');
}
if ($('#udeboendeBoern').is(':checked')) {
$('.udeboendeBoern').removeClass('hide');
}
if ($('#bil').is(':checked')) {
$('.bil').removeClass('hide');
}
if ($('#motorcykel').is(':checked')) {
$('.motorcykel').removeClass('hide');
}
if ($('#knallert').is(':checked')) {
$('.knallert').removeClass('hide');
}
if ($('#cykel').is(':checked')) {
$('.cykel').removeClass('hide');
}
} else
alert('select a checkbox');
});
});
</script>
</body>
</html>
結果は、それが正確な結果を与えることにしていないようだためであるとは何を想定していますか？ –
5つの異なるチェックボックスがすべて6番目のボックスであることを述べたHTMLを持っていなければ、おそらくもっと簡単に解決できます。 –