[JS] Toggle value on Buttonclick

[Undaground]

Hello Com,

also ich habe ein hidden input:

<input type="hidden" value="">

und mehrere Checkboxen:

<input type="checkbox" value="Salami">
<input type="checkbox" value="Peperoni">
<input type="checkbox" value="Mozzarella">

Ich möchte nun bei dem betätigen der Checkboxen den jeweiligen Wert in das hidden input value schreiben/entfernen (toggeln)

Hat jemand ein paar Tipps wie ich das anstellen kann?
Komme in JS schnell durcheinander :P

[False]

Schnell und dreckig, ich denke du suchst eher etwas mit Radiobuttons oder ?


Der Input ist nur nicht hidden damit du es dir angucken kannst, wenn du doch mit Checkboxen willst, sag wann was passieren soll

[Devsome]

Wenn du die Werte im hidden Feld nicht überschreiben willst, vorher auslesen und mit übergeben.

<form id="test" action="#" method="post">
  <input class="cb" type="checkbox" value="Salami">
  <input class="cb" type="checkbox" value="Peperoni">
  <input class="cb" type="checkbox" value="Mozzarella">
  <input type="hidden" value="" id="hiddenField">
</form>

$(document).ready(function() {
    $('.cb').change(function() {
        if($(this).is(":checked")) {
        	document.getElementById("hiddenField").value = $(this).val();
        }     
    });
});

// So wie @.ƒaℓsє. wäre es sogar noch weniger Code. Die Hitze macht mir zu schaffen

[Undaground]

Danke für die schnelle Antwort!
Ich dachte da eher an so etwas wie soll ich das beschreiben? Multivalues? Jedenfalls soll das toggeln von mehreren Werten möglich sein.

[lolhii]

Originally Posted by Undaground

Danke für die schnelle Antwort!
Ich dachte da eher an so etwas wie soll ich das beschreiben? Multivalues? Jedenfalls soll das toggeln von mehreren Werten möglich sein.

Ein Objekt / Array bzw. mehrere Werte kannst du nicht in ein hidden Feld speichern.

Du kannst die Werte aber mit einem Trenner (,; ) im hidden speichern und anschließend splitten (split()).

[False]

Originally Posted by Undaground

Danke für die schnelle Antwort!
Ich dachte da eher an so etwas wie soll ich das beschreiben? Multivalues? Jedenfalls soll das toggeln von mehreren Werten möglich sein.

Meinst du sowas ?
Wie gesagt ist nur schnell und dreckig geschrieben daher nochmal drüber gucken

[Undaground]

Aufgrund meiner Deutschkenntnisse fällt es mir leider nicht so leicht etwas zu erklären, ich denke mit einer Grafik wird es verständlicher.



Da möchte ich jetzt zu jeder Zutat eine Checkbox mit der ich in das inputfield die Zutat einfüge oder entferne

edit:

Originally Posted by .ƒaℓsє.

Meinst du sowas ?
Wie gesagt ist nur schnell und dreckig geschrieben daher nochmal drüber gucken

Genau soetwas habe ich gesucht! Danke dir

Originally Posted by .ƒaℓsє.

Meinst du sowas ?
Wie gesagt ist nur schnell und dreckig geschrieben daher nochmal drüber gucken

Gibt es eine globale Möglichkeit dieses Script für verschiedene Items/Gerichte anzuwenden ohne das ich dieses Script inline für jede einzelne Pizza mit einer anderen ID wiederholen muss?

Bin soweit aber glücklich das es so funktioniert wie ich es mir gedacht habe

Bei der ersten wäre das so:

$(function() {
                                var checkboxen = $('.notopping1 input[type=checkbox]');
                                      checkboxen.on('change',function(){
                                  var values = [];
                                  var checkedCheckboxen = $('.notopping1 input[type=checkbox]:checked');
                                      checkedCheckboxen.each(function(index, element){
                                      var $element = $(element);
                                    values.push($element.val());

                                  });
                                      $('.item_topping item1').val(values.join(','))
                                })
                            });

beim 2ten

$(function() {
                                var checkboxen = $('.notopping2 input[type=checkbox]');
                                      checkboxen.on('change',function(){
                                  var values = [];
                                  var checkedCheckboxen = $('.notopping2 input[type=checkbox]:checked');
                                      checkedCheckboxen.each(function(index, element){
                                      var $element = $(element);
                                    values.push($element.val());

                                  });
                                      $('.item_topping item2').val(values.join(','))
                                })
                            });

[False]

Originally Posted by Undaground

Gibt es eine globale Möglichkeit dieses Script für verschiedene Items/Gerichte anzuwenden ohne das ich dieses Script inline für jede einzelne Pizza mit einer anderen ID wiederholen muss?

Bin soweit aber glücklich das es so funktioniert wie ich es mir gedacht habe

Bei der ersten wäre das so:

$(function() {
                                var checkboxen = $('.notopping1 input[type=checkbox]');
                                      checkboxen.on('change',function(){
                                  var values = [];
                                  var checkedCheckboxen = $('.notopping1 input[type=checkbox]:checked');
                                      checkedCheckboxen.each(function(index, element){
                                      var $element = $(element);
                                    values.push($element.val());

                                  });
                                      $('.item_topping item1').val(values.join(','))
                                })
                            });

beim 2ten

$(function() {
                                var checkboxen = $('.notopping2 input[type=checkbox]');
                                      checkboxen.on('change',function(){
                                  var values = [];
                                  var checkedCheckboxen = $('.notopping2 input[type=checkbox]:checked');
                                      checkedCheckboxen.each(function(index, element){
                                      var $element = $(element);
                                    values.push($element.val());

                                  });
                                      $('.item_topping item2').val(values.join(','))
                                })
                            });

Möglich ist soweit alles Denke du suchst sowas :

[Undaground]

Originally Posted by .ƒaℓsє.

Möglich ist soweit alles Denke du suchst sowas :

Perfekt! Danke