Question

如果我有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_');

    });

  });

Answer 1

您可以使用：

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

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

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

check.prop("checked", false)

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

Answer 2

要识别单击了哪个DIV，请使用jQuery starts with选择器。

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

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

完整示例：jsFiddle here

<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>

jQuery通过拆分id值和匹配元素来检查相关的复选框

2 个答案: