Question

我有一组包含图像或复选框的div。我的最终目标是让复选框上的onclick事件也检查所有以前的复选框。

这是我的布局（动态创建，因此id＃可以根据页面加载数据进行更改）：

   <div id="Main1">
      <div id="Secondary1">
         <div id="div1">
            <img id="section1" src="image1" alt="" />
            <span>Div 1 text</span>
          </div>
         <div id="div2">
            <img id="section2" src="image2" alt="" />
            <span>Div 2 text</span>
          </div>
         <div id="div3">
            <input type="checkbox" id="section3">
             Div 3 text
             </input>
         </div>
         <div id="div4">
            <input type="checkbox" id="section4">
             Div 4 text
             </input>
         </div>
         <div id="div5">
            <input type="checkbox" id="section5">
             Div 5 text
             </input>
         </div>
         <div id="div6">
            <input type="checkbox" id="section6">
             Div 6 text
             </input>
         </div>
      </div>
   </div>

我希望能够检查第5部分并让它自动检查以前的复选框。

我一直在使用的代码产生零星的结果如下：

$('input[id^=section]').click(function() {
   if($(this).attr('checked')) {
       var slide = $(this).attr('id').replace('section', '');
       $(this).replaceWith('<img src="images/ajax-loader.gif" id="loader" alt="" />'); //replace checkbox with loader animation
       $.ajax({
            type: 'POST',
            url: 'URL to AJAX page',
            data: '{ data for ajax call }',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function() {
               $('#loader').parents('div[id^=Secondary]').children('div[id^=section]').each(function() {
                    if($(this).children('input[id^=section]').attr('id') != undefined) {
                          if($(this).children('input[id^=section]').attr('id').replace('section', '') < slide) {
                             $(this).children('input[id^=section]').replaceWith('<img src="images/checkmark.gif" alt="" />');
                       }
                    }
              });
            },
            error: function() {
                   //handle errors
            }
        });
   }
});

在我看来，我的效率低下，我曾尝试.prev()和.prevAll()，但没有成功。但是我也可以错误地使用它们。任何帮助表示赞赏。

Answer 1

试试这个： http://jsfiddle.net/kgc4M/

if(this.checked) {
    $(this).closest('div').prevAll('div:has(:checkbox)')
                         .find(':checkbox').attr('checked','checked');

}

编辑：在评论中，您希望使用.replaceWith()将复选框替换为图片，然后重复使用该复选框的ID。

试试这个：

if(this.checked) {
    $(this).closest('div').prevAll('div:has(:checkbox)')
                .find(':checkbox')
                .replaceWith(function() {
                      return "<img src='/some/path.jpg' id='" + this.id + "' />";
                }).remove();
}

~~请注意，我也会在被替换的复选框上调用unbind()，因为我认为replaceWith()不会为您清除。我会仔细检查。~~

编辑：似乎.replaceWith()删除了事件和数据，但在jQuery.cache中为已删除的元素保留了一个条目。为了彻底，我摆脱了unbind()但最后添加了.remove()，这将它们从缓存中完全删除。

Answer 2

.prev()和.prevAll()选择兄弟姐妹。即使复选框位于DOM树的同一级别，它们也不是兄弟姐妹。兄弟姐妹必须共享相同的立即父级。那些复选框更像是表兄弟。

在点击事件中尝试以下内容：

if(this.checked) {
       $(this).parent().prevAll().children(':checkbox').attr('checked', 'checked');
}

以下是演示：http://jsfiddle.net/dTK6n/

jQuery遍历元素获取与选择器匹配的所有先前元素

2 个答案: