Превратите радио вход и метку в кликабельную строку URL

Question

Извините, мой новичок.Я просто пытаюсь что-то понять.

<span class="button">
            <input type="radio" id="button-2" name="button-group-1">
            <label onclick="changeButton('2');" for="button-2">Text</label>
        </span>

Какой будет действительная кликабельная ссылка на вышеуказанное?

Например, следующий URL-адрес такой же, как при наборе "stackexchange"в окне поиска Google.com: https://www.google.com/search?q=stackexchange

Как это можно сделать с первым примером?Спасибо.

Answer 1

Ваш код не создает кликабельную «ссылку», он просто создает label (который при нажатии) активирует выбор связанной с ним радиокнопки.<label> используется для обеспечения доступности, поскольку позволяет легче щелкать элементы на небольших дисплеях и читается вслух программами чтения с экрана.

Часть onclick предназначена для вызова отдельной функции JavaScript, которая называется changeButton ипередать ей строку '2'.Вы не предоставили эту функцию, поэтому невозможно сказать, что она делает, но это отдельное действие от кнопок label и radio.

// Because of the onclick in the HTML of the label, this function will be invoked
// when you click the label and the data of "2" will be passed to it.
function changeButton(input){
  console.log("You invoked the changeButton function and passed it the value of: " + input);
}

<input type="radio" id="button-2" name="button-group-1">
<label onclick="changeButton('2');" for="button-2">You can click here or on the radio button to activate the radio button, but you can only click on this text to invoke the onclick event associated with the label.</label>

Если вы хотите создать реальную ссылку, вы можете просто использовать элемент HTML <a>, который предназначен для гиперссылок:

<a href="https://www.google.com/search?q=stackexchange">Search for Stack Exchange</a>