jQuery复选框功能根据最大数据获取ID

Posted 2023-05-08

【中文标题】jQuery复选框功能根据最大数据获取ID

【英文标题】：Jquery checkbox function get ID based on biggest data

【发布时间】：2021-12-19 23:34:24

【问题描述】：

我在查找 jquery 复选框函数以根据最大数据获取 ID 时遇到问题。选中的数据，当然是点击后选中的，而不是未选中的。

html：

<input type="checkbox" class="checkbox" name="id[]" data-id="001" data-weight="10" value="001"/> A (10 kg) <br>    
<input type="checkbox" class="checkbox" name="id[]" data-id="002" data-weight="20" value="002"/> B (20 kg) <br>    
<input type="checkbox" class="checkbox" name="id[]" data-id="003" data-weight="30" value="003"/> C (30 kg) <br>    
<input type="checkbox" class="checkbox" name="id[]" data-id="004" data-weight="40" value="004"/> D (40 kg) <br>    
<br>
<br>    
<div>Heaviest Weight</div>
<input type="text" id="getWeight">
<div>ID the Heaviest Weight</div>
<input type="text" id="getId"><br>

javascript：

$(document).ready(function() 
  var maximum = null;
  $(".checkbox").click(function()
    var value = $(this).data('weight');
      maximum = (value > maximum) ? value : maximum;
      id = $(this).data('id');
    
      $('#getId').val(id);
      $('#getWeight').val(maximum);

  );
);

https://codepen.io/andreasdan/pen/MWvVypm

【问题讨论】：

您需要 1. 在单击一个复选框时遍历所有复选框，2. 在考虑其值之前检查复选框是否已选中。这里：codepen.io/amir-s/pen/zYdWqML

【参考方案1】：

尝试循环所有checked复选框，并比较每个权重，每个复选框的每个变化。

$(document).ready(function() 
  $(".checkbox").change(function()
      
    var checkboxes = document.querySelectorAll(".checkbox:checked");
    var maximum = 0;
    var maximumID = 0;
    
    checkboxes.forEach(checkbox => 
      var value = $(checkbox).data('weight');
      if( value > maximum )
        maximum = value;
        maximumID = $(checkbox).data('id');
      
    );
    
    $('#getId').val(maximumID);
    $('#getWeight').val(maximum);
  );
    
);