[HTML][JavaScript]type="checkbox" - wymuszanie liczby zaznaczonych odpowiedzi Opcje

[demolkg]

Witam,

bardzo prosze o pomoc w stworzeniu javaskryptu, który będzie wymuszał na użytkowniku zaznaczenie konkrentej ilości odpowiedzi w formularzu w polach typu checkbox.

Mam formularz, który skłąda się ze 150 pytań a w nim niektóre z pytań wymagają zaznaczenie wymuszonej ilości odpowiedzi. Cel, który chciałbym osiągnąć:

1) gdy użytkownik będzie chciał zaznaczyć w jednym z pytań więcej niż 3 odpowiedzi > allert javascript powiadamiający, że nie może tego zrobić po czym odpowiedzi, które zaznaczył w dalszym ciągu są zaznaczone.
2) po naciśnięciu "submit", w przypadku gdy odpowiedzi zaznaczonych w poszczególnych pytaniach jest mniej niż 3 alert informujący o tym w którym pytaniu należy "doznaczyć" odpowiedzi. Ważne jest jednak to aby po tym alercie odpowiedzi już wcześniej zaznaczone nie znikały.
3) gdy jest zaznaczona odpowiednia ilość odpowiedzi po prostu "submit" puszcza do xxx.php.

Mój kod HTML wygląda następująco:

[HTML] pobierz, plaintext 
 
<p class="ver c1 fs10"><b>Pytanie nr 2</b></p>
<p>Lubię: (wybierz 3 odpowiedzi)</p>
 
<table width="600" style="font-family: Arial; font-size: 9pt;">
<tr><td width="30">1.1</td><td><input type="checkbox" id="1.1" name="pyt1[]" value="1" /><label for="1.1">Odpowiedz 1</label></td></tr>
           <tr><td>1.2</td><td><input type="checkbox" id="1.2" name="pyt1[]" value="2" /><label for="1.2">Odpowiedz 2</label></td></tr>
           <tr><td>1.3</td><td><input type="checkbox" id="1.3" name="pyt1[]" value="3" /><label for="1.3">Odpowiedz 3</label></td></tr>
           <tr><td>1.4</td><td><input type="checkbox" id="1.4" name="pyt1[]" value="4" /><label for="1.4">Odpowiedz 4</label></td></tr>
           <tr><td>1.5</td><td><input type="checkbox" id="1.5 "name="pyt1[]" value="5" /><label for="1.5">Odpowiedz 5</label></td></tr>
           <tr><td>1.6</td><td><input type="checkbox" id="1.6 "name="pyt1[]" value="6" /><label for="1.6">Odpowiedz 6</label></td></tr>
           <tr><td>1.7</td><td><input type="checkbox" id="1.7 "name="pyt1[]" value="7" /><label for="1.7">Odpowiedz 7</label></td></tr>
</table>
 
<br />
 
<p class="ver c1 fs10"><b>Pytanie nr 1</b></p>
<p>Lubię: (wybierz 3 odpowiedzi)</p>
 
 
<table width="600" style="font-family: Arial; font-size: 9pt;">
<tr><td width="30">1.1</td><td><input type="checkbox" id="3.1" name="pyt3[]" value="1" /><label for="3.1">Odpowiedz 0</label></td></tr>
           <tr><td>1.2</td><td><input type="checkbox" id="3.2" name="pyt2[]" value="2" /><label for="3.2">Odpowiedź 1</label></td></tr>
           <tr><td>1.3</td><td><input type="checkbox" id="3.3" name="pyt2[]" value="3" /><label for="3.3">Odpowiedź 2</label></td></tr>
           <tr><td>1.4</td><td><input type="checkbox" id="3.4" name="pyt2[]" value="4" /><label for="3.4">Odpowiedź 3</label></td></tr>
           <tr><td>1.5</td><td><input type="checkbox" id="3.5 "name="pyt2[]" value="5" /><label for="3.5">Odpowiedź 4</label></td></tr>
           <tr><td>1.6</td><td><input type="checkbox" id="3.6 "name="pyt2[]" value="6" /><label for="3.6">Odpowiedź 5</label></td></tr>
           <tr><td>1.7</td><td><input type="checkbox" id="3.7 "name="pyt2[]" value="7" /><label for="3.7">Odpowiedź 6</label></td></tr>
</table>
 
<br /><br />
 
<table width="600">
<tr  align="center">
<td><input type=submit value="Zakończ kwestionariusz i prześlij odpowiedzi" /></td>
<td><input type=reset value="Zresetuj formularz" /></td>
</tr>
</table>
 
</form>
 
[HTML] pobierz, plaintext 

Mój kod Java/Script wygląda następująco (nie ukrywam, że część skryptu jest po prostu ściągnięta z innych źródeł):

[PHP] pobierz, plaintext 
 
    function check_form(el_id) {
        var el = document.getElementsByName("pyt1[]")
        var p = 0
        var submit = true
        var max = 3
        var min = 3
 
        for(i=0; i < el.length; i++)
        {
            if(el[i].checked)
            {
                p++
            }
        }
 
        if(p > max || p < min)
        {
            alert('You can select anywhere from ' + min + ' to ' + max + ' checkboxes.')
        }
        else
        {
            if(submit == true)
            {
                el_id.action = 'action.html'
                el_id.submit()
            }
            else
            {
                // Do whatever here...
            }
        }
    }
 
[PHP] pobierz, plaintext 

Będę wdzięczny za okazałą pomoc.

[b4rt3kk]

Jeśli nie masz nic przeciwko użyciu jQuery to znacznie by Ci to ułatwiło zadanie. Np.

[HTML] pobierz, plaintext 
if ($('input[name="checkbox1"]').length < 3) alert('zaznacz co najmniej 3 odpowiedzi');
[HTML] pobierz, plaintext 

[gorden]

Jeśli nie masz nic przeciwko użyciu jQuery to znacznie by Ci to ułatwiło zadanie. Np.

[HTML] pobierz, plaintext 
if ($('input[name="checkbox1"]').length < 3) alert('zaznacz co najmniej 3 odpowiedzi');
[HTML] pobierz, plaintext 

zabrakło selektora checked:

[JAVASCRIPT] pobierz, plaintext 
$('input[name="checkbox1"]:checked')
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował gorden 2.07.2013, 23:19:35

[demolkg]

Panowie, dziękuję za wasze odpowiedzi.

Nie znam jednak JavaScript sąt poja priśba, czy możecie podpowiedzieć jak wstawić to do mojego kodu oraz ew co z niego wyrzucić?