收集复选框的值，并使用所述值自动选中其他分区中的复选框

Collect values of checkboxes and use said values to automatically check boxes in other div

本文关键字：复选框 分区 其他      更新时间：2023-09-26
<% if !result.platforms.nil? %>
<div class="platforms">
<div class="btn-group" data-toggle="buttons">
<% result.platforms.each do |platform| %>
<label class="btn btn-default">
<input type="checkbox" name="options" class="platbtn" value= <%=platform.id %> ><%= platform["name"] %></label>
<% end %>
</div>
</div>
<% end %>


<% result.platforms.each do |platform| %>
<span class='select_platform'>
<%= check_box_tag "game[platforms][id][]", platform.id %>
<%= label_tag "game[platforms][name][]", platform.name %>
</span>
<% end %>

这个代码变成。。。

<span class="select_platform">
<input id="game_platforms_id_" name="game[platforms][id][]" type="checkbox" value="19">
<label for="game_platforms_name_">Game Boy Advance</label>
</span>

好吧，有了这个，我想取我在#platformsdiv中按下/选中的按钮/复选框的值(platform_id(，并自动选中span class"select platform"中的相应框。

我已经尝试了许多不同的方法来获取所述框的值，但当我去查看数组时，里面什么都没有。我不确定在这两种情况下，我只是简单地以错误的方式要求价值观，还是什么。

我尝试获取和存储值的最后一种方法是使用在堆栈溢出的其他地方找到的代码片段。

var values = $('input:checkbox:checked.platbtn').map(function() {
return this.value;
}).get();

首先，您需要知道如何识别span中的每个复选框。当您使用id将值作为参数传递时，一种简单的方法是使用类属性，如下所示：

<%= check_box_tag "game[platforms][id][]", platform.id, false, class: platform.id  %>

通过这种方式，您可以使用$('.your_id')访问此复选框，因此您可以在所有平台复选框上附加一个更改事件，如下所示：

$(".platforms input[type=checkbox]").on("change", function() {
  var selected = $(this).val(); // This will get the value
  $("."+selected).prop('checked', 'checked'); // This will check the box
});

复选框似乎没有value，所以应该将值存储在html数据属性中。此外，您还必须使用jQuery包装this。

html

<input type="checkbox" name="options" class="platbtn" data-value= <%=platform.id %> >

js

$(':checked.platbtn').map(function(){ return $(this).data('value');}).get();
相关文章：