javascript - 如何获取标签名称作为 Django 模板中选定/选中复选框的值-6ren

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

转载作者：行者123 更新时间：2023-11-28 06:28:37

在 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>

我看到了很多例子，并了解到使用 ids 我可以访问每个复选框的 value 属性。但在这种情况下我真的很困惑，因为复选框的数量是动态的。

我想访问标签名称作为值。有什么帮助吗？

编辑:

var allVals = [];
$('#options :checked').each(function() {
       allVals.push($(this).val());
});
console.log(allVals);

我使用此 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>