Checkbox’y i jedno pole input typu tekstowego = przekazywanie wartości

Podczas tworzenia pewnej aplikacji natknąłem się na mały kłopot, otóż miałem kilka rodzajów usług, były to pola typu checkbox, logika i działanie aplikacji mówiły że lepiej będzie jak te wartości będą w polu input typu tekstowego. Więc trzeba było zastosować kawałek kodu jQuery. Zasada działania bardzo prosta, klikając jedno z pól, do pola input dodawała się wartość pola klikanego, jednym słowem do właściwości value przypisywane były wartości z checkbox’ów. Oczywiście musimy zaimplementować bibliotekę jQuery.

W sekcji head wstawiamy

<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>

Kod html

<label for="kot">
  <input id="kot" class="check" type="checkbox" value="Kot" />Kot
</label>
<label for="pies">
  <input id="pies" class="check" type="checkbox" value="Pies" />Pies
</label>
<label for="słoń">
  <input id="słoń" class="check" type="checkbox" value="Słoń" />Słoń
</label>
 
<input class="disable" type="text" value="" readonly="readonly" />

Kod jQuery

$(".check").click(function () {
  var str = "";
  $(".check:checked").each(function () {
    str += $(this).val() + " ";
  });
  $(".disable").val(str);
})

DEMO

Podziel się...Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest0Share on Reddit0Email this to someone

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *