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

Clickable list item that select a radio

本文关键字：列表 单击 收音机 选择      更新时间：2023-09-26

我有这个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>

如果你只想点击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'));
});

您仍然可以使用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>

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

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

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

$('#yourselector li').click(function() {
    $(this).find(':radio').prop('checked', true);
});
相关文章：