Html 是否可以使用一个复选框筛选两个输入值？

我使用复选框来显示和过滤json数据点。像下面的

值那样写的东西可能吗

示例复选框html：

<input class="star" type="checkbox" value="4,4.5" id="s4" name="check" />

如果你用通俗易懂的英语描述一下你想要达到的目标，也许会有所帮助

查看输入的复选框类型：

您可以分配value=“whatever”，该值将在表单提交时传递（或通过javascript/jquery访问）

听起来你好像在尝试建立某种评级系统（我看到了“明星”和“4，4.5”）。您可以考虑使用另一个元素（span？）甚至一个list（），设置单个列表项的样式，并使用javascript计算值

再说一次，如果你能澄清你想要达到的目标，这会有所帮助

编辑：再想想，是的。您完全可以在复选框值属性中存储类似“4,4.5”的值。如果您想将“4”和“4.5”视为单独的值，我想您可以运行.split（“，”）来获得一个由逗号分隔的值数组。
您可以使用带有隐藏输入的jquery

<script>
 $(document).on('change','#s4',function(){
  $(this).is(':checked'){
   $(this).next().val('4,4.5');
  }else{
   $(this).next().val('');
  }
 });
</script>
<input class="star" type="checkbox" id="s4"/>
<input type="hidden"name="check"/>


$（文档）.on（'change'，'#s4'，function（）{
$（this）.is（“：选中”）{
$（this.next（）.val（'4,4.5'）；
}否则{
$（this.next（）.val（“”）；
}
});
我找到了问题的解决方案。也许这个问题有误导性，因为它只是一个更大项目的一小部分

但是，我发现了一个快速而肮脏的解决方案，它可能没有最好的语法。请评论，如果你认为我可以清理它无论如何，因为我仍在学习

HTML示例：

<div class="boxes">
  <input class="star" type="checkbox" value="4" id="s4" name="4.5" />
  <label for="s4"><img src="img/4star.png"></label>
</div>
<div class="boxes">
  <input class="star" type="checkbox" value="3" id="s3" name="3.5" />
  <label for="s3"><img src="img/3star.png"></label>
</div>
<div class="boxes">
  <input class="star" type="checkbox" value="2" id="s2" name="2.5" />
  <label for="s2"><img src="img/2star.png"></label>
</div>

... 对我想我被这个问题弄糊涂了。可以为复选框指定值。如果要动态显示数据；你可能会在CSS（）中找到答案，我正在使用D3.js和yelpjson数据集在传单地图上绘制点。我的困境是我只能用整数过滤。但是，有时餐馆的评级是3.5。我的值只能是一个或另一个3或3.5。我希望找到一种方法来综合这些结果，这样所有评级为3的餐厅也包括评级为3.5的餐厅。
$('#star-filter').delegate('input[type=checkbox]', 'change', function() {
  $('input.star').not(this).prop('checked', false);  
  var $list = $('.leaflet-zoom-animated > g > circle'),
  $checked = $('input:checked');    
  if ($checked.length) {                            
    var sel = '';
    var selector = '';
    $($checked).each(function(index, element){
      sel += "[data-staralt~='" + element.name + "']";  
      selector += "[data-star~='" + element.value + "']";   
    });                        
    $list.hide();
    $('.leaflet-zoom-animated > g > circle').filter(sel).show();
    $('.leaflet-zoom-animated > g > circle').filter(selector).show();
  }
  else {
    $list.show();
  }
});