动态遍历复选框并获取其值和isChecked

如何解决动态遍历复选框并获取其值和isChecked

我正在根据数据库中的列表动态打印复选框，在代码“ coachProperties”中调用了该复选框。每个coachProperty将获得自己的复选框，并附加唯一的文本。我想将此添加到另一个对象“属性”。像'properties {text1：“ false，text2：” true“}之类的东西，随后将其带到服务器端进行一些过滤。我不需要任何sumbit按钮，因为我希望它动态更新我有js代码的。“属性”中的所有值都将以“ 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 );


                });

            });

解决方法

使用value属性保存要与复选框关联的数据，而不用它来切换true和false。无论是否选中复选框，您都可以从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>

     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');

                 }

             }

            });