Javascript 获取与复选框关联的所有td名称,并显示在html输入字段中

Javascript 获取与复选框关联的所有td名称,并显示在html输入字段中,javascript,html,jquery,Javascript,Html,Jquery,我正在开发一个报价生成器。我试图做的是,当用户选择一个功能时,它应该在html输入字段中显示与id功能相关联的TFeatureName 这是我试过的 html 特征 描述 主页 标准元素的简化设计 登录 具有忘记密码功能的标准登录 输入type=“text”class=“form control”placeholder=“功能1,功能2,…“value=”“id=“功能”> 所以在这里,当用户选中一个复选框的功能字段,如主页,登录应该显示在html输入字段 下面是更新的jquery代码

我正在开发一个报价生成器。我试图做的是,当用户选择一个功能时,它应该在html输入字段中显示与id功能相关联的TFeatureName

这是我试过的

html


特征
描述
主页
标准元素的简化设计
登录
具有忘记密码功能的标准登录
输入type=“text”class=“form control”placeholder=“功能1,功能2,…“value=”“id=“功能”>
所以在这里,当用户选中一个复选框的功能字段,如主页,登录应该显示在html输入字段

下面是更新的jquery代码

       <script src="../js/checkbox-total.js"></script>

    <script type="text/javascript">
        $(".tble_submit").click(function() {
            $('.table tr input[type="checkbox"]:checked').each(function() {
                var abc = [];
                var $row = $(this).closest('tr');
                //used :not(:first-child) to skip first element (the checkbox td)
                $('td:not(:first-child)', $row).each(function(i) {
                    abc.push($row.find('td:nth-child(2)').text());

                })



                $.each(abc, function(i, v) {
                    document.getElementById("features").value += v
                })


            });
        });

    </script>

$(“.tble_submit”)。单击(函数(){
$('.table tr input[type=“checkbox”]:checked')。每个(函数(){
var abc=[];
var$row=$(this.closest('tr');
//使用:not(:first child)跳过第一个元素(复选框td)
$('td:not(:first child)'$行)。每个(函数(i){
abc.push($row.find('td:nth child(2)').text());
})
美元。每个(abc,功能(i,v){
document.getElementById(“功能”).value+=v
})
});
});
但它不起作用

在这里,当我选择2个功能时,它应该显示主页,在输入字段中显示登录,但在输入字段中显示登录说明

输出-主页,主页,登录,登录


预期输出-主页,登录

尝试使用
td:nth child(2)
来选择第二个td元素是的,也这样做了,但它只显示最后选择的内容。。。如果我按照你说的那样做,它只显示登录,而不是主页。更新输入时,你应该进行连接。getElementById(“功能”)。value+=vFYI:the
not(:first child)
将选择所有td,除了我按照你说的那样更改的第一个td之外[abc.push($row.find('td:nth child(2))。text();]通过连接我收到的输出信息-主页、主页、登录、登录我需要再问一个问题是否可以在复选框上的输入字段中显示相关功能单击添加
input[name='product']
到选择器
 $(".tble_submit, input[name ='product']").click(function() {
   var abc = []; //move the array to here
   $('.table tr input[type="checkbox"]:checked').each(function() {
     var $row = $(this).closest('tr');
     //used :not(:first-child) to skip first element (the checkbox td)
     $('td:nth-child(2)', $row).each(function(i) {
       abc.push($(this).text());
     });

   });

   document.getElementById("features").value = abc.join(',');
 });
 $(".tble_submit, input[name ='product']").click(function() {
   var abc = []; //move the array to here
   $('.table tr input[type="checkbox"]:checked').each(function() {
     var $row = $(this).closest('tr');
     //used :not(:first-child) to skip first element (the checkbox td)
     $('td:nth-child(2)', $row).each(function(i) {
       abc.push($(this).text());
     });

   });

   document.getElementById("features").value = abc.join(',');
 });