动态循环复选框并获取它们的值和 isChecked

Question

我根据数据库中的列表动态打印复选框，在代码“coachProperties”中调用。每个 coachProperty 都会有自己的复选框，并附有唯一的文本。我想将其添加到另一个对象“属性”中。像 'properties{text1 : "false, text2 : "true"} 之类的东西，然后稍后将它带到服务器端进行一些过滤。我不想要任何 sumbit 按钮，因为我希望它动态更新我有 js 代码. 'properties' 中的所有值都将以“false”开头，单击复选框时应该会更新。问题是，有时当我取消选中一个框时，它仍然显示为 true，反之亦然。

    <div data-id="coachPropertiesCheckbox">

                <% coachProperties.get('coachProperties').forEach(function (coachProperty) { %>

                    <div class="checkboxes">

                        <label>

                        <input type="checkbox" data-id="test" value="<%= coachProperty.text %>"> <%= coachProperty.text %>

                        </label>

                        </label>

                    </div>

                <% }); %>

            </div>

js代码：

function setProp(obj,prop,value){

            obj[prop] = value;

            };

            var properties = {};

            coachProperties.get('coachProperties').forEach(function (coachProperty) {

            properties[coachProperty.text] = "false";

            

         });

 view.$el.find('[data-id="coachPropertiesCheckbox"] div.checkboxes input').change(function () {

            var isCheckboxedChecked = view.$el.find('[data-id="test"]').is(':checked');

            var valueCheckbox = $(this).attr("value");

            setProp(properties, valueCheckbox, isCheckboxedChecked );

            $.each( properties, function( key, value ) {

                console.log( key + ": " + value );

                });

            });

Answer 1

使用value属性来保存您想要与复选框关联的数据，不要使用它来切换true和false。checkbox是否被勾选，可以从checked属性中得知。一条建议，您很可能不想使用复选框标签，因为value值用于内部目的，用于任何数据操作，而标签的唯一目的是在 UI 中显示。请尝试以下解决方案方向：$('.checkboxes input').on('change', (event) => {&nbsp; const checked = $(event.target).prop('checked')&nbsp; const value = $(event.target).prop('value')&nbsp; console.log(checked, ':', value)})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="checkboxes">&nbsp; <input type="checkbox" id="checkbox1-id" value="checkbox-1" /><label for="checkbox1-id">Checkbox 1</label>&nbsp; <input type="checkbox" id="checkbox2-id" value="checkbox-2" /><label for="checkbox2-id">Checkbox 2</label>&nbsp; <input type="checkbox" id="checkbox3-id" value="checkbox-3" /><label for="checkbox3-id">Checkbox 3</label>&nbsp;&nbsp;</div>

Answer 2

&nbsp; &nbsp;view.$el.find('div.checkboxes input').change(function (event) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var id = $(event.target).attr('data-id');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if ($(event.target).prop('checked')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;resultSetParameters.get('filter').coachProperties.push(id);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;resultSetParameters.trigger('change');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var index = resultSetParameters.get('filter').coachProperties.indexOf(id);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (index > -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;resultSetParameters.get('filter').coachProperties.splice(index, 1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;resultSetParameters.trigger('change');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });