Question

我在循环上有一个复选框，如果选中任何复选框，我想显示div标记。目前，这仅适用于循环的第一行，但不适用于第二行等。

$(document).ready(function(){
    $('#dadaddress').click(function() {
        $("#dad_address").toggle(this.checked);
    });
});

这是一个循环：

        <form name="form1" method="post" action="">
            <input type="checkbox" id="dadaddress" name="dadaddress"/>
            <label for="gameid"></label>
        </form>

这是隐藏的div标记：

<div id="dad_address" style="display: none;">
    I am not hidden.
</div>

有人可以帮助我，我试过很多方法。

完整代码：

<script src="../js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#rowclick4 tr')
            .filter(':has(:checkbox:checked)')
            .addClass('selected')
            .end()
            .click(function(event) {
                if (event.target.type !== 'checkbox') {
                    $(':checkbox', this).trigger('click');
                }
            })
            .find(':checkbox')
            .click(function(event) {
                $(this).parents('tr:first').toggleClass('selected');
            });
    });

    $(document).ready(function(){
        $('#dadaddress').click(function() {
            $("#dad_address").toggle(this.checked);
        });
    });
    </script>
    <?
    $sport = $_GET['sport'];
    $a = $_GET['league'];
    $sql ="SELECT DISTINCT
    class.`name` as result,
    sports.`name`,
    class.league_id,
    market.country
    FROM
    sports
    INNER JOIN market ON sports.sports_id = market.sport_id
    INNER JOIN class ON market.league_id = class.league_id
    WHERE
    sports.id = '$sport'";
    $result = $conn->query($sql);
    $row12 = $result->fetch_assoc();
    ?>
    <table class="table table-link table-hover table-striped" id="rowclick4">
    <tbody>
    <tr>
        <th><h3><? echo $a;?> - <? echo $row12['country'];?></h3></th>
        <th></th>

    </tr>
    <?
    $result = $conn->query($sql);
    while($row = $result->fetch_assoc()) {
    ?>
        <td><? echo '<a href="#">'. $row['result'] .'</a>';?></td>
    <td>
        <form name="form1" method="post" action="">
            <input type="checkbox" id="dadaddress" name="dadaddress"/>
            <label for="gameid"></label>
        </form>
    </td>
    </tr>

   <?
    }
    ?>
    </tbody>
    </table>
    <div id="dad_address" style="display: none;">
        I am not hidden.
    </div>

Answer 1

Jquery在识别正确的表单元素方面存在问题，因为它们共享相同的id。而不是id选择器尝试例如$('input[type="checkbox"]')选择所有被考虑的元素。

我还建议不要使用非唯一ID创建元素。它们应该是唯一的，否则你会遇到这样的问题。

如何使用多个复选框显示div

1 个答案: