<a> тег внутри <label> тег не срабатывает checkbox

Я должен использовать <a> внутри метки <label>. Потому что существует много стилей css, которые применяются только к <a> в нашей текущей системе. Тег <a> не связан ни с какими страницами, кроме как для стилизации/зависания.<a> тег внутри <label> тег не срабатывает checkbox

См код ниже:

<input type="checkbox" id="my-id"> 
<label for="my-id"><a href="javascript:void(0)">Some text</a></label>

Но при нажатии на «какой-то текст», это не изменить статус флажок.

Я пробовал $.preventDefault() на теге <a>, но не работает.

Что я должен сделать, чтобы сделать <a> ведет себя как этикетка?

источник

2017-02-04 Ryan Hu

В теге добавить 'OnClick = "C (это);" ' создать новую функцию ' function c (obj) { $ (obj) .parent(). Prev(). Prop ('checked', true); } ' – Thennarasan

Вероятно, вы хотите, чтобы флажок« Some Text ' – mplungjan

@DavidThomas [ Спецификация HTML5] (https://www.w3.org/TR/html5/forms.html#the-label-element) позволяет '' внутри ''. –

Если удалить атрибут href из a элемента, щелкнув по тексту будет переключать флажок.

<input type="checkbox" id="my-id"> 
<label for="my-id"><a>Some text</a></label>

В качестве HTML спецификации states:

Атрибут на a и area элементов href не требуется

источник

2017-02-04 08:47:54

Но если вы удалите href, это больше не будет ссылкой ... – BladeMight

@BladeMight На самом деле гиперссылка в этом случае не требуется. –

О, как это ... Я думал, что Цель - гиперссылка, я не прав? – BladeMight

Обновлено: этот ответ были даны до редактирования, где сделаны, которые теперь признаны недействительными его, тем не менее, я оставлю это для тех, это может быть полезно

Дайте a якорь pointer-events: none

label[for="my-id"] { 
 
    cursor: pointer; 
 
} 
 
label[for="my-id"] a { 
 
    pointer-events: none; 
 
}

<input type="checkbox" id="my-id"> 
 
<label for="my-id"><a href="#">Some text</a></label>

Если вам необходимо поддерживать старые браузеры, использовать псевдо-элемент, чтобы покрыть его

label[for="my-id"] { 
 
    cursor: pointer; 
 
    position: relative; 
 
} 
 
label[for="my-id"]::after { 
 
    content: ' '; 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    right: 0; bottom: 0; 
 
}

<input type="checkbox" id="my-id"> 
 
<label for="my-id"><a href="#">Some text</a></label>

источник

2017-02-04 08:01:11 LGSon

Это очень ограниченная поддержка браузера. – Soviut

@Soviut Глобальная поддержка около 93,58%, вы обнаружите, что ограничены? – LGSon

Во многих браузерах, особенно мобильных браузерах, его только что начали поддерживать. Chrome 53 на Android была первой версией. Любые более старые версии по-прежнему будут рассматривать это как ссылку. Кроме того, OP хочет стиль ссылки, а не фактический href. – Soviut

Не используйте <a> только для укладки. Вместо этого используйте класс на этикетке.

.my-link-style { 
 
    /* To match the cursor style for an <a> */ 
 
    cursor: pointer; 
 
    
 
    /* Add more styles here */ 
 
}

<input type="checkbox" id="my-id" /> 
 
<label for="my-id" class="my-link-style">Some text</label>

источник

2017-02-04 08:02:50

Вы должны полностью изменить, включают метку в:

<input type="checkbox" id="my-id" > 
<a href="javascript:void(0)"><label for="my-id">Some text</label></a>

JSFiddle

источник

2017-02-04 08:11:37 BladeMight

Главный вопрос: 'при нажатии на« Некоторый текст »он не переключает статус флажка.« Я думаю, что мой пример решает его, кто и почему опущен? – BladeMight

<input type="checkbox" id="my-id"> 
 
<label for="my-id"><a href="javascript:void(0)" target="my-id">Some text</a></label> 
 
<script> 
 
    document.querySelector("label[for=my-id] > a") 
 
    .onclick = function(e) { 
 
    var el = document.getElementById(
 
     this.parentElement.htmlFor 
 
    ); 
 
    el.checked = !el.checked; 
 
    } 
 
</script>

источник

2017-02-04 08:25:21 guest271314

Просто установите анкерный элемент на внешней стороне элемента этикетки.

<input type="checkbox" id="my-id"> 
 
<a href="javascript:void(0)"><label for="my-id">Some text</label></a>

источник

2017-02-04 08:27:38

<a> тег внутри <label> тег не срабатывает checkbox

ответ

Смежные вопросы