Question

我有这个HTML ...当我点击li项目时，我希望无线电输入切换。我知道你可以用标签包装整个东西，但我不能改变HTML（只有JS和CSS）。

有什么想法吗？

    <li>
    <input type="radio" name="KETELWIZARD_TYPE_WONING" data-label="Appartement" value="Appartement | Appartement">Appartement                                                                
    <span class="image">
    <img src="https://acceptatie.foursites.nl/feenstra-ketelkiezer/wp-content/uploads/appartement.png" height="24" width="23" alt="">
    </span>    
    </li>

Answer 1

这是一个使用jQuery的解决方案：

$('li').click(function() {

    $(this).find(':radio').prop('checked', true);

});

如果我是你，我会制作一个更具体的选择器，因为这将适用于页面上的所有<li>元素。因此，请确保您的父<ul>具有特定的ID或类。然后将代码更改为：

$('#yourselector li').click(function() {

    $(this).find(':radio').prop('checked', true);

});

Answer 2

如果你只想点击LI上的任何地方来检查收音机，那么：

http://jsfiddle.net/TrueBlueAussie/zg6uLxg4/1/

$("li").click(function () {
    $(this).find(":radio").prop('checked', true);
});

如果你想要它切换（我想你可能会）：

http://jsfiddle.net/TrueBlueAussie/zg6uLxg4/2/

$("li").click(function () {
    var $radio = $(this).find(":radio")
    $radio.prop('checked', !$radio.prop('checked'));
});

Answer 3

你仍然可以用javascript包装无线电和跨度：

$('.list input:radio').each(function() {
    $(this).parent().wrapInner('<label>');
});

注意：.list是选择ul，根据需要调整选择器的方法。

$('.list input:radio').each(function() {
    $(this).parent().wrapInner('<label>')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list">
    <li>
        <input type="radio" name="KETELWIZARD_TYPE_WONING" data-label="Appartement" value="Appartement | Appartement"/> Appartement
        <span class="image">
            <img src="https://acceptatie.foursites.nl/feenstra-ketelkiezer/wp-content/uploads/appartement.png" height="24" width="23" alt=""/>
        </span> 
    </li>
    <li>
        <input type="radio" name="KETELWIZARD_TYPE_WONING" data-label="Appartement" value="Appartement | Appartement"/> Appartement
        <span class="image">
            <img src="https://acceptatie.foursites.nl/feenstra-ketelkiezer/wp-content/uploads/appartement.png" height="24" width="23" alt=""/>
        </span> 
    </li>
</ul>

选择收音机的可点击列表项

3 个答案: