jquery funksjon som kan håndtere økende id'er

[Yawa]

Beklager overskriften, men klarte ikke å komme opp med en kort og forklarende tittel...

 

Hvordan unngår jeg å måtte legge til 20 slike?

$('#required_visual_1').click(function(){
    $('#required_1').val(this.checked ? 1 : 0);
});

Jeg legger til rader, dynamisk via jquery, i et skjema. Hver rad inneholder diverse elementer, og hvert element lagres i hver sin sepparate php.array() - som igjen kjøres gjennom php.array_map() for å samle de forskjellige verdien til samme array.. Forstålig? Men problemet er at checkbox'er sendes/oppdages ikke hvis de ikke er aktivert, og dette lager krøll når arrayene skal samles da checkboks-arrayet ikke inneholder like mange verdier som de andre hvis en eller flere checkbox'er ikke er aktivert - verdiene havner heller ikke i riktig rad..

 

Derfor har jeg valgt å lage et gjemt tekstfelt slik at verdien 0 kan sendes hvis ikke checkboksen er checked - slik javascrip koden ovenfor viser.

Men det er jo tungvindt å opprette 20 slike for å være sikker på at alle eventuelle rader dekkes. Jeg vet jo ikke hvor mange rader hver enkelt situasjon kreves..

 

Hver dynamiske "rad" ser slik ut:

<div id="ingredient_1" class="ingredient">
    <input type="hidden" name="required[]" value="1" id="required_1">
    <input type="checkbox" name="required_visual[]" value="1" title="required" checked tabindex="-1" id="required_visual_1">

    <input type="text" name="amount[]" class="amount" id="amount_1">
    <select name="unit[]" class="unit" tabindex="-1">...</select>
    <input type="text" name="raw_material[]" class="raw_material">
    <input type="text" name="note[]" class="note" tabindex="-1">
</div>

For hver gang man legger til en ny "rad", så klones dette samt at tallet økes med +1 i id'en..

Hadde håpet at det fantes en måte å lage en universal jquery greie på dette?

[molty]

Hvis du endrer HTML koden din litt;

<input type="hidden" name="required[]" value="1" id="required_1">
<input type="checkbox" name="required_visual[]" value="1" title="required" checked tabindex="-1" data-target="required_1" class="required_checkboxes">

Så mener jeg det skal holde å gjøre slik

$('.required_checkboxes[data-target]').click(function(){
    $('#'+$(this).data('target')).val(this.checked ? 1 : 0);
});

[Crowly]

Du kan loop igjennom alle de ikke avhukede checkbox'ene og så legge de til i stengen som .serialize() genererer

var dataString = $('#myForm').serialize();

$('#myform input[type="checkbox"]:not(:checked)').each(function(){
   dataString += '&'+$(this).attr('name')+'=0';
});

$.post('ajax.php', dataString, function(data){ console.log(data); }, 'json');

Endret 21. januar 2014 av Crowly