【问题标题】:How show checkbox checked data-img on list如何在列表上显示复选框选中的 data-img
【发布时间】:2021-12-06 14:48:53
【问题描述】:

我有这个字段

<input class="red-heart-checkbox " name="photo[]" type="checkbox" value="<?php echo $id; ?>" id="<?php echo $id; ?>" data-img="<?php echo $imageURL; ?>"/>

我想制作一个带有来自 data-img 的 url 图像的图像列表,但我只有这个代码的值:

<script>
            $(function() {
        var masterCheck = $("#masterCheck");
        var listCheckItems = $("#devel-generate-content-form :checkbox");

        masterCheck.on("click", function() {
          var isMasterChecked = $(this).is(":checked");
          listCheckItems.prop("checked", isMasterChecked);
          getSelectedItems();
        });

        listCheckItems.on("change", function() {
          var totalItems = listCheckItems.length;
          var checkedItems = listCheckItems.filter(":checked").length;

          if (totalItems == checkedItems) {
            masterCheck.prop("indeterminate", false);
            masterCheck.prop("checked", true);
          }
          else if (checkedItems > 0 && checkedItems < totalItems) {
            masterCheck.prop("indeterminate", true);
          }
          else {
            masterCheck.prop("indeterminate", false);
            masterCheck.prop("checked", false);
          }
          getSelectedItems();
        });

        function getSelectedItems() {
          var getCheckedValues = [];
          getCheckedValues = [];
            
          listCheckItems.filter(":checked").each(function() {
            getCheckedValues.push($(this).val());
          });
            
          $("#selected-values").html(JSON.stringify(getCheckedValues));
        }
      });
        </script>
        

我的结果是:

<li class="list-group-item" id="selected-values"></li>

看起来像这样:

是否可以使用 url 图像而不是 value ,或者使用 de 数据库的结果来获得 url 图像?

非常感谢!

【问题讨论】:

    标签: javascript php sql checkbox


    【解决方案1】:

    我认为有两种解决方案,

    1. 您已经建议的那个,即使用 db 调用
    2. 尝试在值中传递 imageURL

    【讨论】:

      猜你喜欢
      • 2019-03-06
      • 2014-02-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-01-05
      • 1970-01-01
      相关资源
      最近更新 更多