HTML

Question

当用户单击一个复选框时，我需要使用jquery update_flavors函数来运行和更新具有所有种类的隐藏输入的value属性。

当前，似乎未调用update_flavors函数。

更新的JSFiddle：https://jsfiddle.net/ecqp9nwm/7/

HTML

    <div class="row"> 
            {% assign flavors = "apple, orange, cherry" | split: ","%}

            {% for flavor in flavors %}
                <div class="col-md-6">
                  <div class="form-check">
                      <label class="form-check-label" for="checkbox-{{flavor | handleize }}"><input name='contact[{{flavor| handleize }}]' type="checkbox" class="checkbox-flavor form-check-input" id="checkbox-{{flavor | handleize }}"> {{flavor}}</label>
                  </div>
                </div>
            {% endfor %}
    </div>


      <input type="hidden" id="checkbox-flavors" name="contact[flavor]" value="">

jQuery

<script>
function update_flavors() {         
     var allVals = [];
     $('.checkbox-flavor :checked').each(function() {
       allVals.push($(this).val());
     });
     $('#checkbox-flavors').val(allVals);
  }


$(document).ready(function(){
    $(".checkbox-flavor").click(function(){
       update_flavors;
    });
});

</script>

解决方案：

我的选择器中有空格！大监督！ $('.checkbox-flavor :checked')应该是$('.checkbox-flavor:checked') 我需要在()上添加一个update_flavors();

工作并得到改进：https://jsfiddle.net/ecqp9nwm/12

function update_flavors() {
  var allVals = $('.checkbox-flavor:checked').map(function() {
    return $(this).val()
  }).get();

  $('#checkbox-flavors').val(allVals.join(', '));
}

$(document).ready(function() {
  $(".checkbox-flavor").change(update_flavors);
});

Answer 1

当前，您的复选框没有要添加的值。他们只是有标签。

该网站在后半部很难发布任何解决方案，但请尝试以下操作：

function updateFlavors(e) {
    console.log("update");
    var checks = $(".checkbox-flavor:checked");
    var vals = $.map(checks, function(elem, i) {
      var inp = $(elem);
      return inp.val();
});

$('#checkbox-flavors').val(vals.join(", "));}

$(document).ready(function() {
    $(".checkbox-flavor").each(function() {
        var inp = $(this);
        inp.val(inp.parent().find("label").text());
    })
    $(".check_holder").on("change", ".checkbox-flavor", updateFlavors);
});

通过使用更改处理程序，可以在选中或取消选中项目时进行更新。另外，通过将处理程序分配给父元素，您将只运行一个处理程序，而不是每个输入元素都运行一个处理程序。

隐藏的输入值未使用Jquery更新

HTML

jQuery

解决方案：

1 个答案: