Question

我正在使用复选框显示和过滤json数据点。是否有可能像下面这样写value？

示例复选框html：

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

Answer 1

如果您用简单的英语描述您要达到的目标，也许会有所帮助。

看看输入框的类型： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

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

听起来您正在尝试建立某种评分系统（我看到“ star”和“ 4，4.5”）。您可以考虑使用其他元素（span？）甚至是列表（），设置各个列表项的样式，然后使用javascript计算值。

同样，如果您能弄清自己要达到的目标，那将会很有帮助。

编辑：经过深思熟虑，是的。您肯定可以在复选框value属性中存储“ 4,4.5”之类的值。如果您想将“ 4”和“ 4.5”视为单独的值，我想您可以运行.split（'，'）以获取用逗号分隔的值数组。

Answer 2

您可以将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"/>

Answer 3

我找到了解决问题的方法。也许这个问题具有误导性，因为它只是一个较大项目的一小部分。

但是，我发现了一个快速且肮脏的解决方案，它可能没有最佳语法。请发表评论，如果您认为我仍然可以在学习中以任何方式清理它。

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>

我正在过滤4-4.5或3-3.5等的json数据。我使用输入value和name提取了两个实例。

这是我使用的代码：

$('#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();
  }
});

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

3 个答案: