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

Question

我根据数据库中的列表动态打印复选框，在代码 'coachProperties' 中调用。每个 coachProperty 都会有自己的复选框，并附有唯一的文本。我想将其添加到另一个对象 'properties'。像 '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');

                 }

             }

            });

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

Dynamically loop through checkboxes and get their value and isChecked

html

javascript

model-view-controller

jquery

backbone.js