Checkbox и ссылка

Тема в разделе "JavaScript", создана пользователем repacksman, 5 июл 2015.

Модераторы: ZiX
  1. repacksman

    repacksman

    Регистр.:
    12 июн 2012
    Сообщения:
    154
    Симпатии:
    2
    Помогите написать js код чтоб при клике на ссылку отмечался чекбокс. Брать все в тег <label> не вариант, так как не работает в некоторих браузерах. Вот мой код


    HTML:
    
    <input id="one" type="checkbox" />
    <a id="one"  >Один</a>
    
    <input id="two" type="checkbox" />
    <a id="two"  >Два</a>
    
    <input id="three" type="checkbox" />
    <a id="three"  >Три</a>
    
    
     
  2. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    179
    Вроде, бы не хорошо одинаковые id у элементов использовать? Не? Пусть Мастера меня поправят, если я не прав.
    Вот решение:
    http://jsfiddle.net/Solus_Rex/m1vwbqd2/
    Намётки по нему есть в первой строчке выдачи Яндекса запросу с Вашей проблемой ...
    То что у меня получилось можно и нужно оптимизировать, только я хз как. Может кто скажет. :dk:
     
    Последнее редактирование: 5 июл 2015
    repacksman нравится это.
  3. repacksman

    repacksman

    Регистр.:
    12 июн 2012
    Сообщения:
    154
    Симпатии:
    2
    Работает, но у меня таких чекбоксов будет штук 40 на странице и вручную приописивать не вариант. Может можно как нибудь переделать чтоб ид бьил из двух частей, типа checkboxcheck_one, checkboxcheck_two, где не весь ид а только вторая часть переменная
     
  4. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    179
    Вот я про это, именно, и говорю - надо оптимизировать. Только я попробовал - у меня не вышло, т.к. скилл не прокачан.
     
  5. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    340
    Симпатии:
    162
    Думаю, что легче на класс завязать событие и через .prev() JQuery обращаться к input, вот так:
    Код:
    <input type="checkbox" />
    <a class="check_link">Один</a>
    
    <input type="checkbox" />
    <a class="check_link">Два</a>
    
    <input type="checkbox" />
    <a class="check_link">Три</a>
    <script>
    $(document).ready(function(){
      $('.check_link').on('click', function(){
        var prevInput = $(this).prev('input');
        if (prevInput.prop('checked')) {
          prevInput.prop('checked', false);
        } else {
          prevInput.prop('checked', true);   
        }
     
      });
    
    });
      </script>
    Только вот не ясно почему вы решили, что label for является не кроссбраузерным решением. Будет работать даже в IE7.
    Код:
    <input id="one" type="checkbox" />
    <label for="one">Один</label>
    
    <input id="two" type="checkbox" />
    <label for="two">Два</label>
    
    <input id="three" type="checkbox" />
      <label for="three">Три</label>
    
     
    Последнее редактирование: 6 июл 2015
    BaBL и Solus_Rex нравится это.
  6. BaBL

    BaBL Постоялец

    Регистр.:
    13 ноя 2012
    Сообщения:
    144
    Симпатии:
    87
    Напрашивается label в первую очередь, вам правильно сказали. С ним все хорошо.

    Если все же чем-то не устраивает, подключите jquery, на purejs уже лет 5 никто не пишет.



    HTML:
    <input class="chbox1" type="checkbox" />
    <a class="chlink" data-uid="1" href="#">Один</a>
    
    <input class="chbox2" type="checkbox" />
    <a class="chlink" data-uid="2" href="#">Два</a>
    
    <input class="chbox3" type="checkbox" />
    <a class="chlink" data-uid="3" href="#">Три</a>
    
    <script>
    $('a.chlink').on('click', function() {
        var checkbox = $('.chbox' + $(this).data('uid'));
        if (checkbox.length > 0) { checkbox.prop("checked", !checkbox.prop("checked")); }
    });
    </script>