Question

我是jquery的新手，我有问题我想在我点击复选框时更改父div的背景颜色

请建议

谢谢

<script type="text/javascript">
    function chngbg(id){
        id2 = "d-" + id;
        $(id2).addClass('bg');
    }
</script>

<div class="dataDiv" id="d-<?=$row->id?>">
    <input type="checkbox" onchange="chngbg($(this).val());" value="<?=$row->id?>" name="cbox" /></span>
</div>

Answer 1

ID选择器需要具有前导#字符。

var id2 = "#d-" + id;

Answer 2

如果你倾向于jquery，最好使用以下方法完成这些任务。

$("#yourcheckboxselector").change(function() {
    id = "#d-" + id;
    $(id).addClass('bg');
});

Answer 3

您错过了ID选择器中的#。

function chngbg (id) { 
    id2 = "#d-" + id; 
    $(id2).addClass('bg'); 
}

顺便说一下，你有一个额外的</span>似乎不属于它。

Answer 4

你只需要清理布局，我添加了很多评论，因为你说你是新手。这会做你想要的。

$(function(){  //all of this will execute on page load

    $("[name='cbox']").click(function(event){ //this will bind to the click handler for your checkbox
        $(this) // this equals the checkbox that was clicked
            .parent() //this traverses up to the parent div
                    .addClass("bg"); //this adds the class

    });

});

Answer 5

如果你想让它与你的例子类似，你可以将$ var的$ var设置为一个数组，然后将id添加到它：

<?
    $ids[] = $row->id;
?>
<div class="dataDiv" id="d-<?= $row->id; ?>">
    <input type="checkbox" value="<?= $row->id; ?>" name="cbox" />
</div>

然后，在您的脚本中，您可以执行以下操作：

<script>
    $(document).ready(function() {
        $('<?= '#' . implode(',#', $ids); ?>').change(function() {
            $(this).closest('div').addClass('bg');
        });
    });
</script>

或者，如果您不想使用$ ids var，可以通过类名（最佳方式）或name ='cbox'或其他内容进行选择。

在复选框上更改背景onchange：jquery

5 个答案: