如何用JavaScript实现根据输入金额动态显示酒店星级复选框

修复后的完整代码 #

HTML部分

<form action="#">
  <div class="form-group">
    <input type="number" name="price" id="price" class="form-control" placeholder="سعر الليلة" value="" required="" min="5" max="500" oninput="updateStarOptions()" />
  </div>

  <div class="form-group startdiv">
    <p class="starinputp" data-star="1">
      <input type="checkbox" name="filter" class="star-checkbox" onclick="myFunction()" value="نجمة واحدة" />&nbsp;نجمة واحدة<br>
    </p>
    <p class="starinputp" data-star="2">
      <input type="checkbox" name="filter" class="star-checkbox" onclick="myFunction()" value="نجمتان" />&nbsp;نجمتان<br>
    </p>
    <p class="starinputp" data-star="3">
      <input type="checkbox" name="filter" class="star-checkbox" onclick="myFunction()" value="3 نجوم" />&nbsp;3 نجوم<br>
    </p>
    <p class="starinputp" data-star="4">
      <input type="checkbox" name="filter" class="star-checkbox" onclick="myFunction()" value="4 نجوم" />&nbsp;4 نجوم<br>
    </p>
    <p class="starinputp" data-star="5">
      <input type="checkbox" name="filter" class="star-checkbox" onclick="myFunction()" value="5 نجوم" />&nbsp;5 نجوم<br>
    </p>

    <input type="text" id="filter" size="50" style="display: none;">
  </div>

  <div class="form-group">
    <input type="button" name="submit" class="btn btn-primary btn-block" onclick="gotowhatsapp()" value="ارسال" />
  </div>
</form>

JavaScript部分

// 页面加载时先隐藏所有星级选项
document.addEventListener('DOMContentLoaded', function() {
  const allStarItems = document.querySelectorAll('.starinputp');
  allStarItems.forEach(item => item.style.display = 'none');
});

// 根据输入金额更新星级选项的显示状态
function updateStarOptions() {
  const price = parseFloat(document.getElementById('price').value) || 0;
  const allStarItems = document.querySelectorAll('.starinputp');

  // 先隐藏所有星级
  allStarItems.forEach(item => item.style.display = 'none');

  // 根据金额范围显示对应星级
  if (price > 30) {
    document.querySelector('[data-star="1"]').style.display = 'block';
    document.querySelector('[data-star="2"]').style.display = 'block';
  }
  if (price > 60) {
    document.querySelector('[data-star="3"]').style.display = 'block';
  }
  if (price > 100) {
    document.querySelector('[data-star="4"]').style.display = 'block';
    document.querySelector('[data-star="5"]').style.display = 'block';
  }
}

// 收集选中的星级选项到隐藏输入框
function myFunction() {
  const selectedStars = document.querySelectorAll('.star-checkbox:checked');
  const starValues = Array.from(selectedStars).map(checkbox => checkbox.value).join(', ');
  document.getElementById('filter').value = starValues;
}

// 发送到WhatsApp的函数（保留原逻辑）
function gotowhatsapp() {
  var price = document.getElementById("price").value;
  var filter = document.getElementById("filter").value;
  var url = "https://wa.me/MY NUMBER?text="
    + "السعر المطلوب :  " + price + "%0a"
    + "نجوم الفندق :  " + filter + "%0a";

  window.open(url, '_blank').focus();
}

关键修改说明 #

1. 修复重复ID问题：原代码中所有复选框使用相同id="starinput"违反HTML规范（id必须唯一），改为用class="star-checkbox"统一标识，同时给每个星级的父元素p添加data-star属性，方便按星级定位元素。
2. 动态显示逻辑：
   • 页面加载时自动隐藏所有星级选项，匹配金额≤30的初始状态
   • 给price输入框绑定oninput事件，实时触发显示更新函数
   • 按金额范围逐步解锁星级：超过30显示1、2星，超过60额外显示3星，超过100额外显示4、5星
3. 完善复选框值收集：实现myFunction函数，收集所有选中的星级值，用逗号拼接后存入隐藏输入框，确保发送到WhatsApp时能正确获取选中项。

内容的提问来源于stack exchange，提问作者HDCOM ELEKTRONİK BİLGİSAYAR