JQuery Code umschreiben value "1" und value "2"?
Kann man den Code so umschreiben oder ändern, dass wenn man zurück auf keine_dieser_Krankheiten anklickt, dass dann alle Felder _Erkrankungen den value "1" zurück bekommen?
$(document).ready(function() {
let krankheitenCheckboxes = $("input[type='checkbox'][name$='_Erkrankungen']").not("#keine_dieser_Krankheiten");
let keineCheckbox = $("#keine_dieser_Krankheiten");
function updateValues() {
krankheitenCheckboxes.each(function() {
let hiddenInput = $("input[type='hidden'][name$='_Erkrankungen']");
if ($(this).prop("checked")) {
hiddenInput.val("2");
} else {
hiddenInput.val("1");
}
});
}
krankheitenCheckboxes.on("change", function() {
if ($(this).prop("checked")) {
keineCheckbox.prop("checked", false);
$("input[type='hidden'][name='keine_dieser_Krankheiten']").val("1");
}
updateValues();
});
keineCheckbox.on("change", function() {
if (keineCheckbox.prop("checked")) {
// Setzt alle _Erkrankungen Felder auf "1"
krankheitenCheckboxes.each(function() {
$(this).prop("checked", false);
let hiddenInput = $("input[type='hidden'][name$='_Erkrankungen']");
hiddenInput.val("1");
});
$("input[type='hidden'][name='keine_dieser_Krankheiten']").val("2");
} else {
$("input[type='hidden'][name='keine_dieser_Krankheiten']").val("1");
}
updateValues();
});
updateValues();
});
so sehen die Felder aus
2 Antworten
Hab das mal in einem Online-Editor eingegeben, und es scheint mir, dass dieses Script genau dieses tut.
Allerdings wird hier nicht zwischen den einzelnen Erkrankungen unterschieden - was vermutlich nicht Sinn der Sache ist.
Hab den Quellcode auch ein wenig erweitert - um sichtbare Input-Felder, damit man sofort sieht, was mit den hidden-Feldern passiert (und man nicht in den Entwicklertools nachsehen muss):
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
let krankheitenCheckboxes = $("input[type='checkbox'][name$='_Erkrankungen']").not("#keine_dieser_Krankheiten");
let keineCheckbox = $("#keine_dieser_Krankheiten");
function updateValues() {
//alert("updateValues()");
krankheitenCheckboxes.each(function() {
let hiddenInput = $("input[type='hidden'][name$='_Erkrankungen']");
let textInput = $("input[type='text'][name$='_Erkrankungen']");
if ($(this).prop("checked")) {
hiddenInput.val("2");
textInput.val("2");
} else {
hiddenInput.val("1");
textInput.val("1");
}
});
}
krankheitenCheckboxes.on("change", function() {
if ($(this).prop("checked")) {
keineCheckbox.prop("checked", false);
$("input[type='hidden'][name='keine_dieser_Krankheiten']").val("1");
$("input[type='text'][name='keine_dieser_Krankheiten']").val("1");
}
updateValues();
});
keineCheckbox.on("change", function() {
if (keineCheckbox.prop("checked")) {
// Setzt alle _Erkrankungen Felder auf "1"
krankheitenCheckboxes.each(function() {
$(this).prop("checked", false);
let hiddenInput = $("input[type='hidden'][name$='_Erkrankungen']");
hiddenInput.val("1");
let textInput = $("input[type='text'][name$='_Erkrankungen']");
textInput.val("1");
});
$("input[type='hidden'][name='keine_dieser_Krankheiten']").val("2");
$("input[type='text'][name='keine_dieser_Krankheiten']").val("2");
} else {
$("input[type='hidden'][name='keine_dieser_Krankheiten']").val("1");
$("input[type='text'][name='keine_dieser_Krankheiten']").val("1");
}
updateValues();
});
updateValues();
});
</script>
</head>
<body>
Krankheit 1: <input type="checkbox" name="_Erkrankungen" value="Krankheit1"><br>
Krankheit 2: <input type="checkbox" name="_Erkrankungen" value="Krankheit2"><br>
Krankheit 3: <input type="checkbox" name="_Erkrankungen" value="Krankheit3"><br>
keine dieser Krankheiten: <input id="keine_dieser_Krankheiten" type="checkbox" name="_Erkrankungen" value="keine_dieser_Krankheiten"><br>
<input type="hidden" name="_Erkrankungen">
<input type="hidden" name="_Erkrankungen">
<input type="hidden" name="_Erkrankungen">
<input type="hidden" name="keine_dieser_Krankheiten">
<br>
<input type="text" name="_Erkrankungen"><br>
<input type="text" name="_Erkrankungen"><br>
<input type="text" name="_Erkrankungen"><br>
<input type="text" name="keine_dieser_Krankheiten"><br>
</body>
</html>
Das UserInterface was du da bauen willst ist nicht logisch! Checkboxen sind dazu da 0-n Optionen auszuwählen. Bei dir schließen sich die Optionen ja teilweise gegenseitig aus siehe "keine dieser Krankheiten".
Lasse diese letzte Option doch einfach weg und stelle mit der Beschriftung sicher, dass der Nutzer zweifelsfrei weiß, welche Angabe(n) von Ihm erwartet werden!