Opcja wybrana w checkboxie zaznacza się na drop down list i odwrotnie - jQuery

Odpowiedz Nowy wątek
2014-12-17 23:26
0

Hej,
Mam kod w 'czystym' JavaScripcie i chciałbym zrobić działający analogicznie przy użyciu jQuery, ale nie radzę sobie "przenoszeniem zaznaczenia" z listy na checkboxa.
Są 3 checkboxy podpisane nazwami kolorów, na drop down liście mam takie same kolory, jeśli zaznaczę chceckbox z kolorem to ten sam kolor zostaje wybrany na drop down liście, a jeśli zaznaczę na liście to zaznacza się chceckbox z tym kolorem.

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
 
    function zaznaczBox(id) {
        for (var i = 1;i <= 3; i++)
        {
            document.getElementById(i).checked = false;
        }
        document.getElementById(id).checked = true;
        document.getElementById('lista').selectedIndex = id-1;
    }
 
    function zaznaczSelect(){
        zaznaczBox(document.getElementById('lista').selectedIndex+1);
    }
 
</script>
 
<input type="checkbox" id='1' onclick="zaznaczBox(1)"  />Czerwony</label>
<input type="checkbox" id='2' onclick="zaznaczBox(2)" checked />Niebieski</label>
<input type="checkbox" id='3' onclick="zaznaczBox(3)" />Zielony</label>
 
<select id="lista" onclick="zaznaczSelect()">
    <option>Czerwony</option>
    <option selected>Niebieski</option>
    <option>Zielony</option>
</select>
 
</body>
</html>

W jQuery na razie mam coś takiego

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
 $(function box () {
        $('input:checkbox').click(function () {
 
            if ($(this).is(':checked')) {
                $('input:checkbox').not(this).prop('checked', false);
                var index = this.id;
                $('select#lista').prop('selectedIndex',index);
            }
        });
    })
 
    </script>
</head>
<body>
 
<input type="checkbox" id='0' />Czerwony</label>
<input type="checkbox" id='1'  checked />Niebieski</label>
<input type="checkbox" id='2' />Zielony</label>
 
<select id="lista">
    <option>Czerwony</option>
    <option selected>Niebieski</option>
    <option>Zielony</option>
</select>
 
</body>
</html>
edytowany 1x, ostatnio: dzek69, 2014-12-18 08:54
Poprawiłem kolorowanie w Twoim poście, żeby ogarniało i html, i javascript. Niewygodna składna (trzeba zamykać i otwierać &lt;code&gt; w tej samej linii), ale podnosi czytelność - dzek69 2014-12-18 08:55

Pozostało 580 znaków

2014-12-18 08:53
0

Wyjdźmy od tego, że ID NIE MOŻE zaczynać się od cyfry. To, że w jakimś przypadku Ci to zadziałało, nie znaczy, że jest dobrze i że nie sprawi Ci problemów później.

A prościej zrobisz, jak zastosujesz sobie value w checkboxach (podstawy HTML i tego jak działają formularze - wykorzystaj ich możliwości):
http://jsbin.com/fogoruzona/1/

BTW: To chyba miało być radio a nie checkbox ?


Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0