-2
Ich habe diesen Code, wo der Benutzer bestimmte Checkboxen klicken kann, und basierend auf ihrer Eingabe, eine Ausgabe mit verschiedenen Antworten.Ein klügerer Weg, dies zu tun JS
Ich bin ziemlich neu in JavaScript, also versuche ich nur in einigen Fällen zu lernen, um zu lernen. Ich bin ziemlich überzeugt, dass es einen klügeren Weg gibt, diesen JS-Code zu machen, aber ich bin mir nicht sicher, wie.
Ich möchte nicht, dass Sie unbedingt die korrekte Art des Codes ausführen, aber sagen Sie mir einfach, in welche Richtung ich gehen soll, um das "richtig" zu machen.
<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>
Was das Ergebnis sein soll, weil es nicht genaue Ergebnisse zu sein scheint? –
Es wäre wahrscheinlich einfacher zu trainieren, wenn Sie nicht HTML, die fünf verschiedene Kontrollkästchen hatte alle sechste Box. –