1

如果我有 4 个 div 和 4 个复选框，每个都有 ID。

<div id="block_1"></div>
<div id="block_2"></div>
<div id="block_3"></div>
<div id="block_4"></div>

<input type="checkbox" id="checkbox_1" />
<input type="checkbox" id="checkbox_2" />
<input type="checkbox" id="checkbox_3" />
<input type="checkbox" id="checkbox_4" />

我想单击 div 并选中相关复选框。我可以获得所需的数值，但在单击 div 时难以匹配正确的复选框。

$('div').each(function(){
    var check = $('input:checkbox');

    $(this).click(function(){

        var divNum = $this.attr('id').split('block_'); 

        //Need to check the correct checkbox here

    });


    check.each(function(){

        var cid = $(this).attr('id').split('checkbox_');

    });

  });
4

2 回答 2

1

要确定单击了哪个 DIV，请使用 jQuerystarts with选择器。

$('[id^=block_]').click(function() {
    var myId = $(this).attr('id');
    alert('You clicked id: ' +myId);
});

要匹配正确的复选框，请使用split()从 ID 标签的其余部分中提取数字部分，然后使用该数字来识别正确的复选框。

完整示例： 此处为 jsFiddle

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <style>
            div {width:50px; height:50px; background-color:red; border: 2px solid silver;}
        </style>

        <script type="text/javascript">
            $(document).ready(function() {

                $('[id^=block]').click(function() {
                    var myId = $(this).attr('id');
                    var aId = myId.split('_');
                    var idNum = aId[1];
                    alert('You clicked id: ' +idNum);

                    $('#checkbox_' + idNum).prop('checked',true);
                });

            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div id="block_1"></div>
    <div id="block_2"></div>
    <div id="block_3"></div>
    <div id="block_4"></div>

    <input type="checkbox" id="checkbox_1" />
    <input type="checkbox" id="checkbox_2" />
    <input type="checkbox" id="checkbox_3" />
    <input type="checkbox" id="checkbox_4" />

</body>
</html>
于 2013-08-09T15:19:54.463 回答
1

您可以使用：

check.filter("#checkbox_" + divNum).prop("checked", true);

它将复选框过滤为仅在其 ID 中具有正确编号的复选框，然后将选中的属性设置为 true。

如果要先取消选中其他框，则需要

check.prop("checked", false)

在上述行之前取消选中它们。

于 2013-08-09T15:14:47.837 回答