jQuery 和复选框:适用于表格机器人外部而不是内部的复选框

问题描述 投票:0回答:1

我是 jquery 新手,但我设法根据我的需要调整代码。 我的想法是,我需要一组复选框,其中只能选中 1 个(单选按钮不是一个选项)。

以下代码完美运行。

<!doctype html>
<html>
<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <table>   
        <tr >    
            <input type='checkbox' class='ART2' id='ART2_DE'>DE
            <input type='checkbox' class='ART2' id='ART2_EN'>EN   
            <input type='checkbox' class='ART2' id='ART2_FR'>FR   

            <script type="text/javascript"> 
                $('input.ART2').on('change', function(evt) {if($(this).siblings(':checked').length >= 1) { this.checked = false; }}); 
            </script>  

        </tr>   
    </table>
</body>
</html>

如果我添加数据单元格“< th >”,代码将不再起作用。

<!doctype html>
<html>
<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <table>   
        <tr >    
            <th><input type='checkbox' class='ART2' id='ART2_DE'>DE</th>   
            <th><input type='checkbox' class='ART2' id='ART2_EN'>EN</th>   
            <th><input type='checkbox' class='ART2' id='ART2_FR'>FR</th>   

            <script type="text/javascript"> 
                $('input.ART2').on('change', function(evt) {if($(this).siblings(':checked').length >= 1) { this.checked = false; }}); 
            </script>  

        </tr>   
    </table>
</body>
</html>

有人可以解释一下我的原因吗?

jquery checkbox
1个回答
0
投票
<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <table>   
        <tr>    
            <th><input type='checkbox' class='ART2' id='ART2_DE'>DE</th>   
            <th><input type='checkbox' class='ART2' id='ART2_EN'>EN</th>   
            <th><input type='checkbox' class='ART2' id='ART2_FR'>FR</th>   
        </tr>   

        <script type="text/javascript"> 
            $('input.ART2').on('change', function(evt) {
                var parentRow = $(this).closest('tr');
                if (parentRow.find(':checked').length >= 1) {
                    this.checked = false;
                }
            }); 
        </script>  
    </table>
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.