个人中心
gpt4 book ai didi

jquery - 如何使用 jQuery 更新表中的所有值？

转载 作者：行者123 更新时间：2023-12-01 03:58:22 25 4
gpt4 key购买 nike

我想更新全部，当我点击更新全部按钮时，我想要所有CHANTIERS列表中检查的每一行的数量 SALARIES按下拉列表中选择的值更新。例如，如果我在下拉列表中选择 1，当我单击按钮更新全部时，我想要所有值 chantiers的salaries已检查更新为 1。

嗨，我想更新全部，当我点击“更新全部”按钮时

index.php

  <!DOCTYPE html>
    <html>
    <head> 
        <title>How to update multiple row with checkbox? </title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.5/bootstrap-confirmation.min.js"></script>
        <meta name="csrf-token" content="{{ csrf_token() }}">
    </head>
    <body>
    <div class="container">
        <h3>How to update multiple row with checkbox using Ajax?</h3>
        <div class="form-group col-md-3  ">
            <select class="form-control" id="chantier">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
            </select>
        </div>
        <button class="btn btn-success update-all" data-url="">Update All</button>
        <button style="margin: 5px;" class="btn btn-danger btn-xs delete-all" data-url="">Delete All</button>
        <table class="table table-bordered">
            <tr>
                <th><input type="checkbox" id="check_all"></th>
                <th>S.No.</th>
                <th>nom & prenom</th>
                <th>cin</th>
                <th>matricule</th>
                <th>chantier</th>
            </tr>
            <tr id="tr_id">
                <td><input type="checkbox" class="checkbox" data-id="id"></td>
                <td>0</td>
                <td>jack chim</td>
                <td>pa130191</td>
                <td>2925019599</td>
                <td>2</td>
            </tr>
            <tr id="tr_id">
                <td><input type="checkbox" class="checkbox" data-id="id"></td>
                <td>1</td>
                <td>najib mareouk</td>
                <td>pa454547</td>
                <td>2925019988</td>
                <td>1</td>
            </tr>
    
        </table>
    </div> 
    </body>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#check_all').on('click', function(e) {
             if($(this).is(':checked',true))  
             {
                $(".checkbox").prop('checked', true);  
             } else {  
                $(".checkbox").prop('checked',false);  
             }  
            });
             $('.checkbox').on('click',function(){
                if($('.checkbox:checked').length == $('.checkbox').length){
                    $('#check_all').prop('checked',true);
                }else{
                    $('#check_all').prop('checked',false);
                }
             });
            $('.update-all').on('click', function(e) {
                var idsArr = [];  
                $(".checkbox:checked").each(function() {  
                    idsArr.push($(this).attr('data-id'));
                });  
                if(idsArr.length <=0)  
                {  
                    alert("Please select atleast one record to update.");  
                }  else { 
                    alert("some idea for update all");
                }
            });
        });
    </script>
    </html>

最佳答案 

<!DOCTYPE html>
    <html>
    <head> 
        <title>How to update multiple row with checkbox? </title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.5/bootstrap-confirmation.min.js"></script>
        <meta name="csrf-token" content="{{ csrf_token() }}">
    </head>
    <body>
    <div class="container">
        <h3>How to update multiple row with checkbox using Ajax?</h3>
        <div class="form-group col-md-3  ">
            <select class="form-control" id="chantier">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
            </select>
        </div>
        <button class="btn btn-success update-all" data-url="">Update All</button>
        <button style="margin: 5px;" class="btn btn-danger btn-xs delete-all" data-url="">Delete All</button>
        <table class="table table-bordered">
            <tr>
                <th><input type="checkbox" id="check_all"></th>
                <th>S.No.</th>
                <th>nom & prenom</th>
                <th>cin</th>
                <th>matricule</th>
                <th>chantier</th>
            </tr>
            <tr id="tr_id">
                <td><input type="checkbox" class="checkbox" data-id="id"></td>
                <td>0</td>
                <td>jack chim</td>
                <td>pa130191</td>
                <td>2925019599</td>
                <td>2</td>
            </tr>
            <tr id="tr_id">
                <td><input type="checkbox" class="checkbox" data-id="id"></td>
                <td>1</td>
                <td>najib mareouk</td>
                <td>pa454547</td>
                <td>2925019988</td>
                <td>1</td>
            </tr>
    
        </table>
    </div> 
    </body>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#check_all').on('click', function(e) {
             if($(this).is(':checked',true))  
             {
                $(".checkbox").prop('checked', true);  
             } else {  
                $(".checkbox").prop('checked',false);  
             }  
            });
             $('.checkbox').on('click',function(){
                if($('.checkbox:checked').length == $('.checkbox').length){
                    $('#check_all').prop('checked',true);
                }else{
                    $('#check_all').prop('checked',false);
                }
             });
            $('.update-all').on('click', function(e) {
                let selected = $('#chantier').val();
                
                if ($(".checkbox:checked").length > 0)
                {
                  $(".checkbox:checked").each(function() {  
                    $(this).closest('tr').find('td:last-child').html(selected);
                  });
                } else {
                  alert("Please select atleast one record to update."); 
                }
                                
            });
        });
    </script>
    </html>

关于jquery - 如何使用 jQuery 更新表中的所有值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59865634/

25 4 0
文章推荐： javascript - Wp 媒体库元框无法读取未定义的属性 'state'
文章推荐： javascript - 使用javascript和正则表达式删除图像srcs的左侧部分
文章推荐： javascript - 向导提交按钮问题，我认为js中的这个表单向导问题
文章推荐： security - 持续部署/交付和安全
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com