Question

我有两个字段：一个是复选框（使用Scala构建），一个是输入/文本字段。我正在尝试添加和删除复选框中的值到输入字段。我正在尝试使用逗号来获取多个值和字符串。

以下是我的HTML字段：

<div class="column column1">
    @for(service <- servicesList) {
        <label><input type="checkbox" name="selectServices" value=@service.name><span>@service.name</span></label>
    }
</div>

<input name="services" id="services">

我在标签中使用jQuery来尝试记录onchange事件：

$(document).ready(function(){

    var $services = $('#services');
    var $selectServices = $('#selectServices');

    $selectServices.change(function(){
        for (var i = 0, n = this.length; i < n; i++) {
            if (this[i].checked) {
                $services.val($services.val() + this[i].value);
            }
            else {
                $services.val($services.val().replace(this[i].value, "")); 
            }
        }

    }); 
});

但是，在选中和取消选中复选框时，似乎不会“触发”。我没有收到任何错误或消息，所以我猜它不起作用或代码不正确。

我很感激帮助！

Answer 1

$('#selectServices')按ID选择，没有具有该ID的元素。 Ids必须是唯一的，因此在这种情况下您无法使用它们。我也不建议使用名称，因为输入元素应该具有唯一的名称。您可以使用class：

<label><input type="checkbox" class="selectServices" ...

然后在jQuery中使用.selectServices。和

var $selectServices = $('.selectServices');
$selectServices.change(function(){
    if (this.checked) {
        $services.val($services.val() + this.value);
    } else {
        $services.val($services.val().replace(this.value, "")); 
    }
});

Answer 2

这只是@Halcyon的补充，因此你可以创建一个更好的列表，而不是replace方法。 @Halcyon绝对是您的复选框不起作用的正确答案。这只是处理价值的更好解决方案。

$(document).ready(function(){
  var $services = $('#services');
  var $selectServices = $('.selectServices');
  $selectServices.change(function(){
    updateServices();
  }); 
  function updateServices() {         
     var allVals = [];
     $('.selectServices:checked').each(function() {
       allVals.push($(this).val());
     });
     $services.val(allVals);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column column1">
    
        <label><input class="selectServices" type="checkbox" name="selectServices[]" value="Foo"><span>Foo</span></label>
        <label><input class="selectServices" type="checkbox" name="selectServices[]" value="Bar"><span>Bar</span></label>
        <label><input class="selectServices" type="checkbox" name="selectServices[]" value="FooBar"><span>FooBar</span></label>

</div>

<input name="services" id="services">

Answer 3

试试这个例子，您不必一直搜索和替换，只需设置一个新值：

＆＃13;

$(function() {
  $('input[name=selectServices]').on('change', function() {
    $('#services').val($('input[name=selectServices]:checked').map(function() {
      return this.value;
    }).get());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column column1">
  <label>
    <input type="checkbox" name="selectServices" value='1'><span>1</span>
  </label>
  <label>
    <input type="checkbox" name="selectServices" value='2'><span>2</span>
  </label>
  <label>
    <input type="checkbox" name="selectServices" value='3'><span>3</span>
  </label>
  <label>
    <input type="checkbox" name="selectServices" value='4'><span>4</span>
  </label>
</div>
<input name="services" id="services">

＆＃13;

$（function（）{}是否进入$（document）.ready（function（）{}？

不，它是短手或同等的。

Answer 4

如果您在输入中添加ID，您的代码将会触发：

<input type="checkbox" name="selectServices" id="selectServices" value="" />

和

<input name="services" id="services" type="text" />

从Javascript中的复选框值向字段添加/删除值

4 个答案: