Question

大家好我努力实现自己的目标，我真的需要一些帮助。我有一个单一的复选框列表，我需要能够获取值并能够将它们放入列表

因此，例如屏幕上的3个复选框可能会有更多，用户点击其中一个或全部，我希望能够输出以下内容：

<ul>
<li>Checkbox1 Value</li>
<li>Checkbox2 Value</li>
<li>Checkbox13Value</li>
</ul>

如果可能的话，我还需要能够将所选值保存到hiiden字段中，如下所示： Checkbox1值| Checkbox2值| Checkbox3值

页面上将有2个部分，我将需要此功能，所以我假设我将查看包含复选框的div标签。

我找到了一些代码，但我得到了我需要的代码

     function updateTextArea() {          
     var allVals = []; 
     $('#c_b :checked').each(function() { 
       allVals.push($(this).val()); 
     }); 
     $('#EXCUR').val(allVals)
     $('#t').val(allVals)
  } 
 $(function() { 
   $('#c_b input').click(updateTextArea); 
   updateTextArea(); 
 });

我的HTML将是这样的：

  <div id="c_b"> 
  <div>
   <input type="checkbox" value="one_name"> 
   <input type="checkbox" value="one_name1"> 
   <input type="checkbox" value="one_name2"> 
  </div> 
  </div> 

  <div id="c_G"> 
  <div>
   <input type="checkbox" value="one_name" checked> 
   <input type="checkbox" value="one_name1"> 
   <input type="checkbox" value="one_name2"> 
  </div> 
  </div> 
 <textarea id="t"></textarea> <!-- UL LIST SHOULD GO HERE -->
 <input type="hidden" id="EXCUR" />
<div id="OP"></div>

对此的任何帮助都会很棒，我只是无法让它工作

非常感谢提前

杰森

Answer 1

Here是我认为你正在寻找的一个小提琴，但如果你回答我上面的评论，我将能够进一步帮助你。

Answer 2

您可以使用jQuery的map（）将所需的值提取到数组中，然后根据需要加入数组中的项目。

这样的事情：

function updateTextArea() {

 var items = $.map($('#c_b :checked'),function(el, ix) {
    return 'Checkbox' + (ix+1) + ' ' + $(el).val();
 });
 if(items.length > 0) {
    $('#t').val('<ul><li>' + items.join('</li><li>') + '</li></ul>');
    $('#EXCUR').val(items.join(' | '))
 } else {
    $('#t').val('');
    $('#EXCUR').val('');
 }
}

$(function() {
  $('#c_b input').click(updateTextArea);
  updateTextArea();
});

Fiddle to demonstrate

Answer 3

    function updateTextArea(){
        var vals = []
        var str="<ul>";
    //iterate over checked boxes
        $("input:checked").each(function(){
            var v = $(this).val()
            vals.push(v)
            str += "<li>" + v + "</li>"
        })
        str+="</ul>"

        $("#EXCUR").val(vals.join("|"));
        $("#t").val(str);
    }
    $(function(){
//bind click to all checkboxes in the page
        $(":checkbox").click(updateTextArea);

    })

复选框值列出Jquery

3 个答案: