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

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>
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 ?

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