动态循环复选框并获取它们的值和 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) => {

  const checked = $(event.target).prop('checked')

  const value = $(event.target).prop('value')

  console.log(checked, ':', value)

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="checkboxes">

  <input type="checkbox" id="checkbox1-id" value="checkbox-1" /><label for="checkbox1-id">Checkbox 1</label>

  <input type="checkbox" id="checkbox2-id" value="checkbox-2" /><label for="checkbox2-id">Checkbox 2</label>

  <input type="checkbox" id="checkbox3-id" value="checkbox-3" /><label for="checkbox3-id">Checkbox 3</label>  

</div>

Answer 2

   view.$el.find('div.checkboxes input').change(function (event) {

             var id = $(event.target).attr('data-id');

             if ($(event.target).prop('checked')) {

                 resultSetParameters.get('filter').coachProperties.push(id);

                 resultSetParameters.trigger('change');

             } else {

                 var index = resultSetParameters.get('filter').coachProperties.indexOf(id);

                 if (index > -1) {

                     resultSetParameters.get('filter').coachProperties.splice(index, 1);

                     resultSetParameters.trigger('change');

                 }

             }

            });