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

【问题标题】：Dynamically loop through checkboxes and get their value and isChecked动态循环通过复选框并获取它们的值和 isChecked
【发布时间】：2020-10-09 12:07:43
【问题描述】：

我根据数据库中的列表动态打印出复选框，在代码“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 );


                });

            });

【问题讨论】：

标签： javascript html jquery model-view-controller backbone.js

【解决方案1】：

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

【讨论】：

嗯第一行： $('.checkboxes input').on('change', (event) => { 在浏览器中返回此错误消息： Uncaught SyntaxError: missing ) after argument list
这可能是浏览器缓存问题吗？它在 Chrome 和 Firefox 中运行良好。
不太可能，我在 Web 开发过程中总是清除缓存。不知道它来自哪里

【解决方案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');

                 }

             }

            });

【讨论】：