Question

我目前正在尝试收集特定复选框的值，并将其附加到另一个列表中。

这是我的HTML文件的一部分。

 changeset = Product.changeset(product, %{sort_order: x})
 Repo.update(changeset)

这是我目前使用javascript的内容。

 Products.update(product, %{sort_order: x})

首先，我没有获得所有我打勾的食品价值。其次，我实际上只是在添加复选框，然后将复选框从字段集中删除。我知道<fieldset> <legend>Pick the foods you like.</legend> <input id="tacos" type="checkbox" name="food" value="tacos"> <label for="tacos">Tacos</label> <input id="crepes" type="checkbox" name="food" value="crepes"> <label for="crepes">Crepes</label> <input id="dumplings" type="checkbox" name="food" value="dumplings"> <label for="dumplings">Dumplings</label> </fieldset>应该是一个列表，但是我不太确定该如何写。

Answer 1

您当前的问题是，您总体上是在选中复选框。您只希望选择标签的值，并且不想将其移动到其他地方。

下面的代码使用的jquery在单击id #check的按钮后运行。该代码循环检查每个选中了name=food的复选框，并将链接到该复选框的label文本附加到列表中。更新：然后将此列表添加到一系列列表中，并按要求提供标题。

如果您希望列表在每次检查之间重设，我会取消注释（否则，您可以在列表中有多个相同食物的版本）。

让我知道您是否还需要其他东西。希望对您有帮助

$("#check").click(function() {

  // Uncomment the line below if you want to reset the list
  // $("#lists .favourite-list").remove();

  // Create variable to store list of foods if selected
  tempList = ""

  // Check if any foods are selected
  $('[name="food"]:checked').each(function() {

    // Get the text value of the label
    // Should do this, rather than use 'for' value as it might differ
    checkLabel = $("label[for='" + $(this).attr("value") + "']").text();

    // Append a new list element
    tempList = tempList + "<li>" + checkLabel + "</li>";

  })

  // Check if at least one food has been added
  if (tempList != "") {

    // Add ul wrappers to list and header.
    tempList = "<div class='favourite-list'><p>Favourite Foods:</p><ul>" + tempList + "</ul></div>"

    // Append new list
    $("#lists").append(tempList);

  }

});

#check {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
  <legend>Pick the foods you like.</legend>

  <input id="tacos" type="checkbox" name="food" value="tacos">
  <label for="tacos">Tacos</label>

  <input id="crepes" type="checkbox" name="food" value="crepes">
  <label for="crepes">Crepes</label>

  <input id="dumplings" type="checkbox" name="food" value="dumplings">
  <label for="dumplings">Dumplings</label>

</fieldset>

<button id="check">Add to list</button>

<div id="lists">

</div>

Answer 2

您将不得不遍历所有复选框

var $food = $('[name="food"]:checked');
$food.each(function () {
   $li.append(this.value);
});

Answer 3

您可以基于选定的元素生成动态的选项列表，并在单击该字段集时触发。

$('fieldset').click(function(){
  var food = document.querySelectorAll('[name="food"]:checked');
  var foodStr = ''; 
  food.forEach(function(item){
    foodStr += '<li>' + item.value + '</li>';
  })
  $('#selectedItems').html(foodStr);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
        <legend>Pick the foods you like.</legend>

        <input id="tacos" type="checkbox" name="food" value="tacos">
        <label for="tacos">Tacos</label>

        <input id="crepes" type="checkbox" name="food" value="crepes">
        <label for="crepes">Crepes</label>

        <input id="dumplings" type="checkbox" name="food" value="dumplings">
        <label for="dumplings">Dumplings</label>

    </fieldset>
    <br/>
    <ul id="selectedItems"></ul>

Answer 4

获取带有食品名称的检查项目，然后将其附加到<ul>

function submit(){
var $food = $('[name="food"]:checked');
var $ul= $('#li-id');
var li='';
$food.each(function () {
    li += '<li>' + this.value + '</li>';
});

 $ul.html(li);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
        <legend>Pick the foods you like.</legend>

        <input id="tacos" type="checkbox" name="food" value="tacos">
        <label for="tacos">Tacos</label>

        <input id="crepes" type="checkbox" name="food" value="crepes">
        <label for="crepes">Crepes</label>

        <input id="dumplings" type="checkbox" name="food" value="dumplings">
        <label for="dumplings">Dumplings</label>

    </fieldset>
    <ul id='li-id'>
    
    </ul>
              <button type="button" class="btn btn-primary" onclick="submit()">submit</button>

如何从复选框Jquery收集检查值

4 个答案: