使用jQuery獲取來自javascript樹的複選框值使用jquery

-1

我已經創建了使用jquery的樹結構它是如此基本的樹結構，但我陷入了問題。任何幫助，將不勝感激。使用jQuery獲取來自javascript樹的複選框值使用jquery

我無法獲得選定的複選框items.Also此代碼有一個小問題，當父複選框未選中，但它的孩子仍然檢查如何解決此問題，然後只獲取其父對其檢查的子。

這裏是工作代碼：http://jsfiddle.net/deepshah/2zefx66s/

var data = { 
id: 0, 
title: "root - not displayed", 
children: [{ 
    id: 1, 
    title: "Option 1", 
    children: [{ 
     id: 11, 
     title: "Option 11", 
     children: [{ 
      id: 111, 
      title: "Option 111" 
     }, { 
      id: 112, 
      title: "Option 112" 
     }] 
    }, { 
     id: 12, 
     title: "Option 12" 
    }] 
}, { 
    id: 2, 
    title: "Option 2", 
    children: [{ 
     id: 21, 
     title: "Option 21" 
    }, { 
     id: 22, 
     title: "Option 22" 
    }] 
}, { 
    id: 3, 
    title: "Option 3", 
    children: [{ 
     id: 0, 
     title: "Option 31" 
    }, { 
     id: 0, 
     title: "Option 32" 
    }] 
}] 
}; 

function addItem(parentUL, branch) { 
for (var key in branch.children) { 
    var item = branch.children[key]; 
    $item = $('<li>', { 
     id: "item" + item.id 
    }); 
    $item.append($('<input>', { 
     type: "checkbox", 
     id: "item" + item.id, 
     name: "item" + item.id 
    })); 
    $item.append($('<label>', { 
     for: "item" + item.id, 
     text: item.title 
    })); 
    parentUL.append($item); 
    if (item.children) { 
     var $ul = $('<ul>', { 
      style: 'display: none' 
     }).appendTo($item); 
     $item.append(); 
     addItem($ul, item); 
    } 
} 
} 

$(function() { 
addItem($('#root'), data); 
$(':checkbox').change(function() { 
    $(this).closest('li').children('ul').slideToggle(); 
}); 
$('label').click(function(){ 
    $(this).closest('li').find(':checkbox').trigger('click'); 
}); 
});

這是javacript代碼到目前爲止，我已經建立。

來源

2014-12-02 Deep Shah

http://jsfiddle.net/2zefx66s/1/ – dm4web 2014-12-02 20:08:12

感謝@ dm4web。這給了我複選框值，但請看到我更新的問題，並幫助我。 – 2014-12-06 11:05:23

用下面選擇你得到選中的複選框：

$(':checkbox:checked')

來源

2014-12-02 17:41:34 haul

http://jsfiddle.net/2zefx66s/2/

$(function() { 
    addItem($('#root'), data); 
    $(':checkbox').change(function() { 
     $(this).closest('li').children('ul').slideToggle(); 
     if($(this).is(":checked")) 
     { 
      var id=$(this).attr('id'); 
      // if the parent unchecked uncheck children 
      $(this).parent().find('li input[type="checkbox"][id^="'+id+'"]').prop('checked', false);    
     } 
    }); 
    $('label').click(function(){ 
     $(this).closest('li').find(':checkbox').trigger('click'); 
    }); 
}); 

$('#get').click(function(){ 
    $('#root input[type="checkbox"]:checked').each(function(){   
     var id=$(this).attr('id'); 
     //get last checked childern 
     if($(this).parent().not(':has(ul)').size()>0) 
     { 
      var name=$(this).attr('name'); 
      var value=$(this).val();    

      alert(name+':'+value); 
     } 
    }) 
})

來源

2014-12-07 21:15:20 dm4web

使用jQuery獲取來自javascript樹的複選框值使用jquery

回答

相關問題