如何使用 jQuery 遍历 id 名称的变体（例如 idname1、idname2）

Question

我有一列 10 个复选框，顶部还有一个标题为 "Select All" 的附加复选框。每个复选框都有一个连续的 ID，例如 "cbox1"、"cbox2" 等。单击这些复选框中的每一个时，它们会使图像变得可见，该图像位于该复选框旁边的 div 中。这个 div 被称为 "tinybox" 并且它有一个连续的 id 并且匹配它各自的 cbox。因此，第 4 个复选框的 ID 为 cbox4，单击后会打开 tinybox4。

我正在尝试使用 jQuery，这样当您单击 "Select All" 复选框时，它会循环遍历每个 cbox 并使用 .show() 或 .hide()在所有 tinybox 变体上。

以下 jQuery 在用户单击 "Select All" 复选框时运行，目前只能显示或隐藏 #tinypic1。而不是只有 tinypic1，它应该通过 tinypic1、2、3、4 循环（？）...所以我如何调整此代码以遍历 tinybox（n），其中（n）表示从 1 到 10 的递增整数：

 <script type="text/javascript">
    $(document).ready(function() {
        $('#selectall').click(function() {
            if ($('#selectall').prop('checked')) {
                $("#tinypic1").show();
                $('.cboxes').each(function() {
                    this.checked = true;
                });
            } else {
                $("#tinypic1").hide();
                $('.cboxes').each(function() {
                    this.checked = false;
                });
            }
        });
    });
</script>

希望我说清楚了。我试图尽可能最好地表达我的解决方案概念。感谢您的宝贵时间

Answer 1

enter code here将代码行 $('#tinypic1').show() 移动到 each 块并将其更改为

this.next().show();

hide 部分也是同样的想法

Answer 2

$('#selectall').toggle(
    function() {
        $('.cboxes').each(function(){
                  $(this).prop('checked', true);
                  $(this).next().show();  
         });
    },
    function() {
        $('.cboxes').each(function(){
                  $(this).prop('checked', false);
                  $(this).next().hide();  
         });
    }
);

Answer 3

您可以 select 您 select 中以字符串开头的所有内容或：

function toggleAll(state) {
    if (state===true) {
         $( "[id^='tinyPic']" ).show();
         $( "[id^='cbox']" ).prop('checked', true);
    } else {
         $( "[id^='tinyPic']" ).hide();
         $( "[id^='cbox']" ).prop('checked', false);
    }
}

Answer 4

有 2 种方法可以快速完成此操作。

您可以向脚本中添加一个循环，如下所示：这里有一个fiddle这种方式Fiddle

    $('#selectall').click(function() {
        if ($('#selectall').prop('checked')) {
            for ( i = 1; i <= 10; i++ ) {
              $("#tinypic" + i).show();  
               $("#cbox" + i).prop("checked", true);
            }                

        } else {
            for ( i = 1; i <= 10; i++ ) {
              $("#tinypic" + i).hide();  
               $("#cbox" + i).prop("checked", false);
            }     
        }
    });

你可以像这样在 id 上做一个开头：这里是 fiddle 这种方式 fiddle

            if ($('#selectall').prop('checked')) {                    
                  $("[id^='tinypic']").show();  

                   $("[id^='cbox']").prop("checked", true);


            } else {
                  $("[id^='tinypic']").hide();  
                   $("[id^='cbox']").prop("checked", false);

            }

如何使用 jQuery 遍历 id 名称的变体（例如 idname1、idname2）

How to iterate through a variation of an id name using jQuery (such as idname1, idname2)

html

javascript

checkbox

jquery