从下拉列表中获取复选框的值

I'm really stuck here & I think I'm missing something really obvious. Kindly help me out(I'm a beginner in html,javascript)

我真的被困在这里,我想我错过了一些非常明显的东西。请帮帮我(我是html,javascript的初学者)

I have made a dropdown containing a un-ordered list of items that I'm getting populated from JSON.Here'e the code for populating the list:

我已经制作了一个下拉列表,其中包含我从JSON填充的无序的项目列表。这是填充列表的代码:

    var oldJSON = null;
    setTimeout(function main_func() { 
            var counter=0;
            $.getJSON('mydata.json', function(data) { 
                    if(JSON.stringify(oldJSON) != JSON.stringify(data)){ 
                        //$(".dropdown").html("");
                        //$("#notifications").append("<option style=display:none></option>")
                        $.each(data.items, function(i, v) {
                                counter++;  
                                document.getElementById('test').innerHTML=counter ;
                                $('.dropdown').append('<li><input type="checkbox" value="'+counter+'"id="'+ counter +'"><label for="'+ counter +'"><div id="type">' + v.type +'</div>'+'<div id="text">' +v.text +'</div>'+'<div id="pnr">'+v.pnr+'</div>'+ '</label></li>');
                                ;});
                    }
                    oldJSON = data;
            });
            setTimeout(main_func,2000); 
    });

Now,my dropdown(consider it a facebook type notification) contains checkbox(for mark as read-haven't implemented it yet). I need to get the values from the checkbox. Right now I'm getting blank values. Could someone please point me in the right direction? Here's my html:

现在,我的下拉列表(认为它是一个facebook类型通知)包含复选框(标记为read-尚未实现)。我需要从复选框中获取值。现在我得到了空白的价值观。有人可以指出我正确的方向吗?这是我的HTML:

<div id="selected_item"></div>
<section class="main">
    <div class="wrapper-demo">
        <div id="dd" class="wrapper-dropdown-4">
            <ul class="dropdown"></ul>
        </div>
        <div class="main_func"></div>
        <div id="test"></div>
    </div> 
</section>

& here's the javascript to go along with it(which is not working):

&这里是与它一起使用的javascript(这不起作用):

$('.dropdown input[type="checkbox"]').on('click', function () {
    var title = $(this).closest('.dropdown').find('input[type="checkbox"]').val(),
    title = $(this).val() + ","; 
    if ($(this).is(':checked')) {
        $('.selected_item').append(title);
    } 
});

Kindly do edit the question if you can frame it better ;) . If its any help,I've pasted my code here for html css json

如果您可以更好地构建问题,请编辑问题;)。如果有任何帮助,我已将我的代码粘贴到html css json

1 个解决方案

#1

try this demo

试试这个演示

$('.dropdown input[type="checkbox"]').on('click', function () {
    var title = "";
    $('.dropdown input[type="checkbox"]').each(function(){           
    if ($(this).is(':checked')) {
        if(title != "")
            title = title + ',';

        title = title + $(this).val();            
    } 
    $('#selected_item').html(title);
    });
});

1 个解决方案

#1

更多相关文章

随机推荐