Сделать текст кнопки переключателя без добавления HTML

Question

Я знаю, что если у вас есть радиокнопки, и вы хотите сделать текст кликабельным, вы можете обернуть эту кнопку в тег HTML-метки, как описано здесь How do you make the radio button text to be clickable too?.

Но можно ли это сделать без добавления дополнительного HTML (только через Javascript или jQuery)?

В моем конкретном случае у меня есть группа переключателей внутри div, и каждое радио и его текст имеют диапазон (но все они имеют одинаковое имя). Вот пример ..

Which team will win the world series in 2015? 
    <div id="teams"><span class="team"><input type="radio" name="team" value="11">&nbsp; Cardinals</span> 
<span class="team"><input type="radio" name="team" value="12">&nbsp; Royals</span> 
<span class="team"><input type="radio" name="team" value="13">&nbsp; Dodgers</span> 
</div> 

Answer 1

Без дополнительной HTML, с помощью JQuery (fiddle):

$('span.team').css('cursor', 'default').click(function(e) { 
 
    var cur = $(this).find('input[type="radio"]').prop('checked') 
 
    $(this).find('input[type="radio"]').prop('checked', !cur); //true turns false and vice versa 
 
}); 
 

 
$('input[type="radio"]').click(function(e) { 
 
    e.stopPropagation(); //otherwise the actual radio buttons won't work properly 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Which team will win the world series in 2015? 
 
<div id="teams"> 
 
    <span class="team"><input type="radio" name="team" value="11">&nbsp; Cardinals</span> 
 
    <span class="team"><input type="radio" name="team" value="12">&nbsp; Royals</span> 
 
    <span class="team"><input type="radio" name="team" value="13">&nbsp; Dodgers</span> 
 
</div>

Это приведет к изменению указателя на матовый h стиль элементов label, а также unselect выбранный в данный момент переключатель на другой щелчок.

---

Однако, вы можете просто изменить span 'с до label-х - они будут работать точно так же.

Answer 2

Если вы не можете писать новые HTML, вы можете с JQuery:

// make click in anywhere of the span 
$('span.team').on('click', function() { 
     var radio = $(this).find('input[type=radio]'); // the input 
     if(radio.prop('checked')) { 
      radio.prop('checked', false); // checking false 
     } else { 
      radio.prop('checked', true); //checking true 
     } 
}); 

Answer 3

Одной из возможностей было бы заменить элементы span на элементы label по коду.
Но делайте это только в том случае, если элементы span не используются в другом месте кода JavaScript.

$('span.team').each(function() { 
    $('<label>').addClass('team').html($(this).html()).insertAfter($(this); 
    $(this).remove(); 
}); 

Answer 4

Вы можете заставить выбор по щелчку:

$(function() { 
 
    $('span.team').on('click', function(e) { 
 
    $(this).children('input[name=team]').prop('checked', true); // mark this 
 
    }); 
 
});

span.team { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
Which team will win the world series in 2015? 
 
<div id="teams"><span class="team"><input type="radio" name="team" value="11">&nbsp; Cardinals</span> 
 
    <span class="team"><input type="radio" name="team" value="12">&nbsp; Royals</span> 
 
    <span class="team"><input type="radio" name="team" value="13">&nbsp; Dodgers</span> 
 
</div>