Checkbox и ссылка

[repacksman]

Помогите написать js код чтоб при клике на ссылку отмечался чекбокс. Брать все в тег <label> не вариант, так как не работает в некоторих браузерах. Вот мой код

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

 

[Solus_Rex]

<input id="one" type="checkbox" /> <a id="one" >Один</a>

Вроде, бы не хорошо одинаковые id у элементов использовать? Не? Пусть Мастера меня поправят, если я не прав.
Вот решение:
Для просмотра ссылки Войди или Зарегистрируйся
Намётки по нему есть в первой строчке выдачи Яндекса запросу с Вашей проблемой ...
То что у меня получилось можно и нужно оптимизировать, только я хз как. Может кто скажет.

 

[repacksman]

Вроде, бы не хорошо одинаковые id у элементов использовать? Не? Пусть Мастера меня поправят, если я не прав.
Вот решение:
Для просмотра ссылки Войди или Зарегистрируйся
Намётки по нему есть в первой строчке выдачи Яндекса запросу с Вашей проблемой ...
То что у меня получилось можно и нужно оптимизировать, только я хз как. Может кто скажет.

Работает, но у меня таких чекбоксов будет штук 40 на странице и вручную приописивать не вариант. Может можно как нибудь переделать чтоб ид бьил из двух частей, типа checkboxcheck_one, checkboxcheck_two, где не весь ид а только вторая часть переменная

 

[Solus_Rex]

Работает, но у меня таких чекбоксов будет штук 40 на странице и вручную приописивать не вариант. Может можно как нибудь переделать чтоб ид бьил из двух частей, типа checkboxcheck_one, checkboxcheck_two, где не весь ид а только вторая часть переменная

Вот я про это, именно, и говорю - надо оптимизировать. Только я попробовал - у меня не вышло, т.к. скилл не прокачан.

 

[Absolute]

Может можно как нибудь переделать чтоб ид бьил из двух частей, типа checkboxcheck_one, checkboxcheck_two, где не весь ид а только вторая часть переменная

Думаю, что легче на класс завязать событие и через .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>

 

[BaBL]

Напрашивается label в первую очередь, вам правильно сказали. С ним все хорошо.

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

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