时间戳

首页 > 解决方案 > 获取与选中复选框关联的所有 td 名称并显示在 html 输入字段中

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

问题描述

我正在开发一个报价生成器。我想做的是当用户选择一个功能时，它应该在 html 输入字段中显示关联的 tfeature 名称和 id 功能

这是我尝试过的

html

 <table class="table" id="table">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th scope="col"></th>
                                            <th scope="col">Features</th>
                                            <th scope="col">Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>

                                                <div class="form-check">
                                                    <input class="form-check-input" name="product" value="300" type="checkbox" onclick="totalIt()">
                                                    <label class="form-check-label" for="exampleCheck1"></label>
                                                </div>
                                            </td>
                                            <td>Homepage</td>
                                            <td>Simplistic design with standard element</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="form-check">
                                                    <input class="form-check-input" name="product" value="200" type="checkbox" onclick="totalIt()">
                                                    <label class="form-check-label" for="exampleCheck1"></label>
                                                </div>
                                            </td>
                                            <td>Login</td>
                                            <td>Standard Login with forgot password functionality</td>
                                        </tr>
</tbody>
</table>
                <div class="form-group">
input type="text" class="form-control" placeholder="Feature 1, Feature 2, ..." value="" id="features">
                                </div>
  <input type="button" value="Get Selected" class="tble_submit" onclick="GetSelected()" />

所以在这里当用户选择一个复选框时，像主页这样的功能字段，登录应该显示在 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>

但它不工作。

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

在此处输入图像描述

输出 - 主页，主页，登录，登录

预期输出 - 主页、登录

标签： javascripthtmljquery

解决方案

 $(".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(',');
 });

推荐阅读