Checkbox der auch zwei befehle kennt möglich?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

RXBeat

Mitglied
9 März 2019
34
0
6
41
Aaron3219 hat mir mal geholfen einen QuerySelector zu erstellen.
Die Idee war oben zwei Texteingabefelder und unten im Dritten Fenster wird angezeigt was man oben eingegeben hat.
Funktioniert so weit super, thanks noch mal dafür.

Jetzt möchte ich jedoch noch ein Checkbox daneben einfügen.
Wenn ich das antippe soll beispielsweise "Checkbox-Test" im Dritten Fenster stehen.
Wenn ich es wieder abwähle soll es verschwinden.
Bei mir ist es so, ich kann es nur anklicken, sobald ich es wieder abwähle, bleibt der Text bestehen.

Benutze den ganz normalen Checkbox befehl:
<input type="checkbox" name="onofbutton" value="Checkbox-Text" class="chb" onchange="change();">

Dazu kommt, wenn ich es von anfang an nicht auswähle, ich die oberen zwei Textfelder ausfülle, es trotzdem die Value aus der Zeile zieht. Also egal ob ausgewählt oder nicht, es zieht immer die Value.

Würde mich auf hilfe oder tipps freuen. Ich vermute das es ohne Javascript nichts wird, da kann ich nur copy und pasten, zu junger anfänger dafür. Darum thanks für die tipps im voraus.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.336
269
83
66
Du musst zusätzlich den Zustand der Checkbox abfragen, ob sie gecheckt ist oder nicht:
Code:
    <input type="checkbox" id="mycb" onchange="changecb(this);">
    <div id="testcont">Der Text</div>
    <script>
        function changecb(cb) {
            var cont = document.getElementById("testcont");
            if (cb.checked) cont.style.display = "none";
            else cont.style.display = "block";
        }
    </script>
 

RXBeat

Mitglied
9 März 2019
34
0
6
41
Hilft mir schon mal die funktion zu verstehen aber so ganz funktionieren tut es nicht.
Ok jetzt erkennt er beide befehle aber "Der Text" steht da wenn nicht ausgewählt und wenn ausgewählt dann verschwindet "Der Text", soll ja anders herum sein.
Dazu kommt, ich hab ja ein weiteres Text feld wo ich "Der Text" rein ziehe.

function change() {
var test1 = document.querySelector('.test1').value;
var test2 = document.querySelector('.test2').value;
document.getElementById("test").value = test1 + "" + test2

den benutze ich. Wie könnte ich jetzt die antwort von der checkbox reinziehen?
Soll ja auch angezeigt werden.
normalerweise schreibe ich in die Zeile "class="test3" onchange="change();"

Oh man, bin auch gerade zu müde. Ich glaube ich melde mich morgen lieber noch mal :)
Nacht und danke
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.336
269
83
66
Das erste ist eine Kleinigkeit, Du brauchst es nur zu invertieren:
Code:
            if (cb.checked) cont.style.display = "block";
            else cont.style.display = "none";
Das andere verstehe ich jedoch nicht. Wenn ich "reinziehen" lesen, denke ich an Drag&Drop, d. h. Ziehen mit der Maus und Fallenlassen. Aber mir scheint, Du meinst damit etwas anderes? Willst Du, dass die Inhalte von .test1 und .test2 zusammen gehängt werden sollen und dann in das Feld #test geschrieben und das, wenn die Checkbox gechecked wird?
 
Zuletzt bearbeitet:

RXBeat

Mitglied
9 März 2019
34
0
6
41
Hi Sempervivum, sorry wenn ich manchmal einige Tage benötige. Also ja ich meinte tatsächlich was anderes. Ich gucke gerade wie man hier einen code reinhauen kann.

Code:
<html>

<!-- Deine Checkbox ohne meine funktion -->
    <input type="checkbox" id="mycb" onchange="changecb(this);">
    <div id="testcont">Der Text</div><br>

<!-- Meine Checkbox aber leider ohne deine funktion -->
<input type="checkbox" name="onofbutton" value="Checkbox-Text" class="chb" onchange="change();">

<input type="text" placeholder="Eingabe" class="dat" onchange="change();">

<div id="yourtext" class="ytx" onchange="change();">
    <h2>Your Note</h2>
    <textarea id="test" style="width:90%; height:55px;"></textarea><br>
</div>

<script>
    function change() {
        var chb = document.querySelector('.chb').value;  
        var dat = document.querySelector('.dat').value;  

        document.getElementById("test").value = chb + " - " + dat;
}

    function changecb(cb) {
        var cont = document.getElementById("testcont");
        if (cb.checked) cont.style.display = "block";
        else cont.style.display = "none";
        }
</script>
</html>
Ach ja, und bei deinem Checkbox steht direkt der Text daneben oder daunter. Der soll nur unten im großen Fenster angezeigt werden sonst nicht.
Bisschen hilfe könnte ich gerade echt gebrauchen. Vielen Dank!
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.336
269
83
66
Dann prüfe mal, ob es dieses ist:
Code:
    <!-- Deine Checkbox, jetzt hoffentlich mit beiden Funktionen -->
    <input type="checkbox" name="onofbutton" value="Checkbox-Text" class="chb" onchange="change(this);">

    <input type="text" placeholder="Eingabe" class="dat" onchange="change();">

    <div id="yourtext" class="ytx" onchange="change();">
        <h2>Your Note</h2>
        <textarea id="test" style="width:90%; height:55px;"></textarea><br>
    </div>

    <script>
        function change(cb) {
            var cont = document.getElementById("test");
            if (cb) {
                if (cb.checked) cont.style.display = "block";
                else cont.style.display = "none";
            }
            var chb = document.querySelector('.chb').value;
            var dat = document.querySelector('.dat').value;
            cont.value = chb + " - " + dat;
        }

    </script>
 

RXBeat

Mitglied
9 März 2019
34
0
6
41
Ne nicht wirklich. Das Anzeigefenster unten soll ja nie verschwinden.
Beim anklicken von der checkbox soll ja nur ein wort hinzugefügt oder entfernt werden. "Checkbox-Text" wird schon mal im richtigen fenster angezeigt aber wenn ich checkbox entferne ist das ganze Anzeige fenster unten weg.
Dazu kommt, wenn ich Checkbox von anfang an nicht auswähle, dann einen text daneben eingebe, erscheint trotzdem der Text von der Checkbox. Was ja nicht soll.
 

RXBeat

Mitglied
9 März 2019
34
0
6
41
Sorry wenn ich damit nerve aber ich muss das unbedingt irgendwie hinbekommen...
Der Code oben funktioniert halt nur halbwegs.

Hier mal der Code wie ich es mir vorstelle: (Optisch)

Sobald ich auf Person 1 klicke, übernimmt der sofort den radiobutton und da steht "Admin" davor. Obwohl ich nicht drauf geklickt habe.
Mein Wunsch wäre das Wort "Admin" per radiobutton an und aus zu schalten.
Standardmäßig soll der aus sein. Also kein Häkchen. Und das wort "Admin" soll auch nicht neben dem Button sein sondern nur unten im Monitor bereich.

Könntest du oder wer anderes noch mal drüber schauen?
Wäre mir wirklich wichtig. Vielen Dank
 
Werbung:

Latest posts