Javascript 如何获取标签名称作为Django模板中选中/选中复选框的值_Javascript_Jquery_Html_Checkbox_Django Templates

Javascript 如何获取标签名称作为Django模板中选中/选中复选框的值

javascript jquery html checkbox

Javascript 如何获取标签名称作为Django模板中选中/选中复选框的值,javascript,jquery,html,checkbox,django-templates,Javascript,Jquery,Html,Checkbox,Django Templates,在django模板中，我有一个模式，点击一个跨度就会弹出 <div class="modal-body"> <form action="#"> <fieldset> <legend>Please Select Your Option</legend> <p><label style="font-size:15px;"><

在django模板中，我有一个模式，点击一个跨度就会弹出

 <div class="modal-body">
     <form action="#">
         <fieldset>
             <legend>Please Select Your Option</legend>
                 <p><label style="font-size:15px;"><input type="checkbox" style="margin-right:5px;" id="selectAll"/>Select All</label></p>
              <div id="options">                  
                    {% for data in allData %}
   <p><label style="font-size:15px;" for={{data}}><input type="checkbox" style="margin-right:5px;" value={{data}}/>{{option}}</label></p>
             {% endfor %}
        <div>
         </fieldset>
     </form>
</div>

我使用这个jquery代码来获取值，但它没有返回完整的值，正如我在代码中所做的那样（将标签名放在value属性中）

如果选项显示：

a,b,c,d

它返回具有[a]的数组。


    <html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>

    $(document).ready(function(){


        // for delete row
        $('#container').on('click', 'input[type="checkbox"]', function () {
            alert($(this).closest('label').text());
        });

        $('#btnAdd').click(function () {
            iCounter=$('#container p').siblings().length + 1
            $('#container').append('<p><label style="font-size:15px;" for="test1"><input type="checkbox" style="margin-right:5px;" value="test1"/>sample' + iCounter + '</label></p>');

        });



    });
</script>
</head>
<body>
    <button id="btnAdd">Add Data</button>
    <div class="modal-body">
     <form action="#">
         <fieldset>
             <legend>Please Select Your Option</legend>
                 <p><label style="font-size:15px;"><input type="checkbox" style="margin-right:5px;" id="selectAll"/>Select All</label></p>
             <div id="container">

             <p><label style="font-size:15px;" for="test1"><input type="checkbox" style="margin-right:5px;" value="test1"/>sample</label></p>

            </div>
         </fieldset>
     </form>
</div>
</body>
</html>

$（文档）.ready（函数（）{
//用于删除行
$（“#容器”）。在（'click'，'input[type=“checkbox”]”上，函数（）{
警报（$（this）.closest（'label'）.text（））；
});
$（'#btnAdd'）。单击（函数（）{
iCounter=$（'#容器p'）.sibbines（）.length+1
$（“#容器”）.append（“sample”+iCounter+”）；
});
});
添加数据
请选择您的选项
全选
样品


$（文档）.ready（函数（）{
//用于删除行
$（“#容器”）。在（'click'，'input[type=“checkbox”]”上，函数（）{
警报（$（this）.closest（'label'）.text（））；
});
$（'#btnAdd'）。单击（函数（）{
iCounter=$（'#容器p'）.sibbines（）.length+1
$（“#容器”）.append（“sample”+iCounter+”）；
});
});
添加数据
请选择您的选项
全选
样品

是否需要标签文本？？是否需要标签文本？？复选框的数量在循环中，即是动态的。复选框的数量在循环中，即是动态的。

    <html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>

    $(document).ready(function(){


        // for delete row
        $('#container').on('click', 'input[type="checkbox"]', function () {
            alert($(this).closest('label').text());
        });

        $('#btnAdd').click(function () {
            iCounter=$('#container p').siblings().length + 1
            $('#container').append('<p><label style="font-size:15px;" for="test1"><input type="checkbox" style="margin-right:5px;" value="test1"/>sample' + iCounter + '</label></p>');

        });



    });
</script>
</head>
<body>
    <button id="btnAdd">Add Data</button>
    <div class="modal-body">
     <form action="#">
         <fieldset>
             <legend>Please Select Your Option</legend>
                 <p><label style="font-size:15px;"><input type="checkbox" style="margin-right:5px;" id="selectAll"/>Select All</label></p>
             <div id="container">

             <p><label style="font-size:15px;" for="test1"><input type="checkbox" style="margin-right:5px;" value="test1"/>sample</label></p>

            </div>
         </fieldset>
     </form>
</div>
</body>
</html>