Toggle value on Buttonclick

05/09/2016 15:19 Undaground#1
Hello Com,

also ich habe ein hidden input:

HTML Code:
<input type="hidden" value="">
und mehrere Checkboxen:

HTML Code:
<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
05/09/2016 15:39 False#2
Schnell und dreckig, ich denke du suchst eher etwas mit Radiobuttons oder ?
[Only registered and activated users can see links. Click Here To Register...]

Der Input ist nur nicht hidden damit du es dir angucken kannst, wenn du doch mit Checkboxen willst, sag wann was passieren soll :D
05/09/2016 15:39 Devsome#3
Wenn du die Werte im hidden Feld nicht überschreiben willst, vorher auslesen und mit übergeben.

Code:
<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>
Code:
$(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
05/09/2016 16:30 Undaground#4
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.
05/09/2016 16:50 lolhii#5
Quote:
Originally Posted by Undaground View Post
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()).
05/09/2016 16:54 False#6
Quote:
Originally Posted by Undaground View Post
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 ?[Only registered and activated users can see links. Click Here To Register...]
Wie gesagt ist nur schnell und dreckig geschrieben daher nochmal drüber gucken ;)
05/09/2016 16:57 Undaground#7
Aufgrund meiner Deutschkenntnisse fällt es mir leider nicht so leicht etwas zu erklären, ich denke mit einer Grafik wird es verständlicher.

[Only registered and activated users can see links. Click Here To Register...]

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

edit:

Quote:
Originally Posted by .ƒaℓsє. View Post
Meinst du sowas ?[Only registered and activated users can see links. Click Here To Register...]
Wie gesagt ist nur schnell und dreckig geschrieben daher nochmal drüber gucken ;)

Genau soetwas habe ich gesucht! Danke dir :)

Quote:
Originally Posted by .ƒaℓsє. View Post
Meinst du sowas ?[Only registered and activated users can see links. Click Here To Register...]
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:
HTML Code:
$(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

HTML Code:
$(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(','))
                                })
                            });
05/09/2016 18:07 False#8
Quote:
Originally Posted by Undaground View Post
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:
HTML Code:
$(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

HTML Code:
$(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 :pDenke du suchst sowas :[Only registered and activated users can see links. Click Here To Register...]
05/09/2016 18:10 Undaground#9
Quote:
Originally Posted by .ƒaℓsє. View Post
Möglich ist soweit alles :pDenke du suchst sowas : [Only registered and activated users can see links. Click Here To Register...]
Perfekt! Danke :)