如何用jQuery实现点击li选中其下checkbox并模拟单选组效果

没问题，这就帮你实现这个模拟单选按钮组的效果！我会基于你提供的代码，加上对应的jQuery逻辑，还可以加个视觉反馈让选中状态更明显。

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .btn { 
            background-color: gray; 
            font-size: 15px; 
            font-weight: bold; 
            font-family: sans-serif; 
            border: 1px solid black; 
            padding: 10px; /* 扩大点击区域，提升交互体验 */
            margin: 5px 0;
            cursor: pointer;
        }
        .btn.active { /* 可选：给选中的列表项添加样式，直观区分状态 */
            background-color: #555;
            color: white;
        }
    </style>
</head>
<body>
    <ul>
        <li class="btn checkall">
            <input type="checkbox" name="offer[key1]" class="check_one">
            <input type="checkbox" name="offer[key2]" class="check_one">
            <input type="checkbox" name="offer[key3]" class="check_one">
            <input type="checkbox" name="offer[key4]" class="check_one">
        </li>
        <li class="btn checkall">
            <input type="checkbox" name="offer[key1]" class="check_one">
            <input type="checkbox" name="offer[key2]" class="check_one">
            <input type="checkbox" name="offer[key3]" class="check_one">
            <input type="checkbox" name="offer[key4]" class="check_one">
        </li>
        <li class="btn checkall">
            <input type="checkbox" name="offer[key1]" class="check_one">
            <input type="checkbox" name="offer[key2]" class="check_one">
            <input type="checkbox" name="offer[key3]" class="check_one">
            <input type="checkbox" name="offer[key4]" class="check_one">
        </li>
        <li class="btn checkall">
            <input type="checkbox" name="offer[key1]" class="check_one">
            <input type="checkbox" name="offer[key2]" class="check_one">
            <input type="checkbox" name="offer[key3]" class="check_one">
            <input type="checkbox" name="offer[key4]" class="check_one">
        </li>
    </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        jQuery(function($) {
            // 绑定列表项的点击事件
            $('.checkall').on('click', function() {
                // 第一步：清除所有复选框的选中状态
                $('.check_one').prop('checked', false);
                // 清除所有列表项的选中样式
                $('.checkall').removeClass('active');
                
                // 第二步：选中当前列表项内的所有复选框
                $(this).find('.check_one').prop('checked', true);
                // 给当前列表项添加选中样式
                $(this).addClass('active');
            });

            // 可选：阻止复选框的点击冒泡，避免点击复选框时重复触发列表项事件
            $('.check_one').on('click', function(e) {
                e.stopPropagation();
            });
        });
    </script>
</body>
</html>

逻辑说明 #

1. 全局清除状态：每当点击任意一个列表项时，先把页面上所有复选框的选中状态取消，同时移除所有列表项的active样式，确保之前的选中状态被完全重置。
2. 设置当前选中状态：然后将当前点击的列表项内部的所有复选框设为选中，并给该列表项添加active样式，让用户能直观看到哪个选项被选中。
3. 可选的冒泡阻止：给复选框单独绑定点击事件并阻止冒泡，这样用户如果单独点击复选框，不会触发整个列表项的选中逻辑——如果你希望点击复选框也触发列表项的选中，这部分代码可以直接删掉。

内容的提问来源于stack exchange，提问作者traini qula