Question

我有一个包含四个复选框的列表，如下所示：

<input type="checkbox" class="checkboxstyle"  id="id_peer_educator" value="Peer Educator"/>Peer Educator<br>
<input type="checkbox" class="checkboxstyle"  id="id_chw" value="CHW"/>CHW<br>
<input type="checkbox" class="checkboxstyle"  id="id_health_provider" value="Health Prvider"/>Health Provider<br>
<input type="checkbox" class="checkboxstyle"  id="id_purchase" value="Purchase"/>Purchase<br>
<input type="text" id="CD_Supplr" class="CD_Supplr" name="CD_Supplr" placeholder=" Suppliers : "/>

前四个是复选框，而最后一个是文本框。如何将数据附加到文本字段供应商？（选中后，应将其附加到文本字段供应商，如果未选中，则应从文本字段供应商中删除该值）。

我尝试通过以下方式实现它：

var CD_Supplr = $('#CD_Supplr').val();
var id_peer_educator = $('#id_peer_educator').val();
var id_chw = $('#id_chw').val();
var id_health_provider = $('#id_health_provider').val();
var id_purchase = $('#id_purchase').val();

$('#id_peer_educator').click(function () {
    $('#CD_Supplr').val(CD_Supplr + "," + id_peer_educator;
});

$('#id_chw').click(function () {
    $('#CD_Supplr').val(CD_Supplr + "," + id_chw;
});

但它不起作用，实施它的最佳方法是什么？

Answer 1

您可以在选中array时使用checkbox添加值，并在取消选中时将其删除，并使用join()函数通过input中的显示来加入数组值。

希望这有帮助。

var selected_checkbox=[];

$('.checkboxstyle').change(function()
{
   if($(this).is(':checked'))
   {
        //If checked add it to the array
        selected_checkbox.push($(this).val());
   } 
   else 
   {
      //If unchecked remove it from array
      for (var i=selected_checkbox.length-1; i>=0; i--) 
      {
          if (selected_checkbox[i] === $(this).val()) 
              selected_checkbox.splice(i, 1);
      }
   }
    $('#CD_Supplr').val(selected_checkbox.join(','));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkboxstyle"  id="id_peer_educator" value="Peer Educator"/>Peer Educator<br>
<input type="checkbox" class="checkboxstyle"  id="id_chw" value="CHW"/>CHW<br>
<input type="checkbox" class="checkboxstyle"  id="id_health_provider" value="Health Prvider"/>Health Provider<br>
<input type="checkbox" class="checkboxstyle"  id="id_purchase" value="Purchase"/>Purchase<br>
<input type="text" id="CD_Supplr" class="CD_Supplr" name="CD_Supplr" size='50' placeholder=" Suppliers : "/>

Answer 2

Demo

order_id

Answer 3

在checkboxex上的change事件中添加侦听器，然后使用match()查看CD_Suplr文本框中是否已存在复选框的值。然后，使用此条件的结果添加/删除复选框值：

var $target = $('#CD_Supplr');
$('[type="checkbox"]').change(function(){
    if($target.val() == ''){
        $target.val('Supplier: '); //default text
    }
    if(!$target.val().match($(this).val())){
        var text = $target.val();
        $target.val(text + ' ' + $(this).val() + ', ');
    } else {
        var text = $target.val();
        $target.val(text.replace($(this).val()+', ', ''));
    }
    //make sure the last comma is removed
    $target.val($target.val().replace(/\,$/, ''));
});

JSFiddle Demo

Jquery，Html选中复选框时将值附加到文本字段

3 个答案: