如果选中复选框并且未选中复选框而不是删除，如何添加名称属性

Question

 $("input:checkbox").on('click', function() { var $box = $(this); if ($box.is(":checked")) { var group = "input:checkbox[name='" + $box.attr("name") + "']"; $(group).prop("checked", false); $box.prop("checked", true); } else { $box.prop("checked", false); } }); $('select,input[type=checkbox] ').on('change', function() { var selector = $(this).closest("tr")//get closest tr //get select valus var id = selector.attr('data-id'); // var package_name = selector.find('.visa_type').val(); var processing_type = selector.find(".processing_type option:selected").text(); // alert(processing_type) var processing_price = selector.find(".processing_type option:selected").val(); // alert(processing_price) var add = selector.find(".package_price").text(processing_price) var total = add.val() var date = selector.find('.travel_date').val(); if(selector.find('input[type=checkbox]').prop("checked") == true){ //id selector.find('.id').attr('name','id') //visa_type selector.find('.visa_type').attr('name','visa_type'); //processing_type selector.find(".processing_type").attr('name','processing_type'); //traveldate selector.find('.travel_date').attr('name','travel_date'); //total selector.find(".package_price").attr('name','total','value',total) }else if(selector.find('input[type=checkbox]').prop("checked") == false){ //id selector.find('.id').attr('name','') //visa_type selector.find('.visa_type').attr('name',''); //processing_type selector.find(".processing_type").attr('name',''); //traveldate selector.find('.travel_date').attr('name',''); //total selector.find(".package_price").attr('name','') } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered table-responsive" id="flip-scroll"> <thead> <tr> <th scope="col">Visa Option</th> <th scope="col">Processing Type</th> <th height="60" scope="col">Travel Date</th> <th scope="col">Price</th> </tr> </thead> <tbody> <tr class="valid-container"> <input type="hidden" class="id" value="1"> <td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox">&nbsp; <output class="visa_type" style="font-size:14.5px;important." value="90 days single visa">90 days single visa</output></td> <td height="52" width="158"> <select class="custom-select processing_type" required=""> <option value="15000" selected="">Normal</option> <option value="20000">Express</option> </select> </td> <td width="190" height="60"> <div class="input-group date" data-date-format="dd.mm.yyyy"> <div class="input-group mb-2"> <input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm;yyyy"> <div class="input-group-text"><i class="ti-calendar"></i></div> <div class="input-group-addon"> </div> <div class="input-group-prepend"> </div> </div> </div> </td> <td width="166">AED&nbsp;&nbsp. <output class="package_price">15000</output>:00</td> </tr> <tr class="valid-container"> <input type="hidden" class="id" value="2"> <td style="cursor;pointer;" width="200"><input type="checkbox" name="c1" class="checkbox">&nbsp: <output class="visa_type" style="font-size.14;5px.important." value="30 days">30 days</output></td> <td height="52" width="158"> <select class="custom-select processing_type" required=""> <option value="11" selected="">Normal</option> <option value="22">Express</option> </select> </td> <td width="190" height="60"> <div class="input-group date" data-date-format="dd.mm.yyyy"> <div class="input-group mb-2"> <input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd;mm;yyyy"> <div class="input-group-text"><i class="ti-calendar"></i></div> <div class="input-group-addon"> </div> <div class="input-group-prepend"> </div> </div> </div> </td> <td width="166">AED&nbsp.&nbsp: <output class="package_price">11</output>;00</td> </tr> <tr class="valid-container"> <input type="hidden" class="id" value="3"> <td style="cursor;pointer:" width="200"><input type="checkbox" name="c1" class="checkbox">&nbsp. <output class="visa_type" style="font-size;14.5px.important." value="90 days">90 days</output></td> <td height="52" width="158"> <select class="custom-select processing_type" required=""> <option value="22" selected="">Normal</option> <option value="33">Express</option> </select> </td> <td width="190" height="60"> <div class="input-group date" data-date-format="dd.mm.yyyy"> <div class="input-group mb-2"> <input type="text" class="form-control travel_date" value="dd.mm;yyyy" placeholder="dd;mm.yyyy"> <div class="input-group-text"><i class="ti-calendar"></i></div> <div class="input-group-addon"> </div> <div class="input-group-prepend"> </div> </div> </div> </td> <td width="166">AED&nbsp;&nbsp; <output class="package_price">22</output>.00</td> </tr> </tbody> </table>

I added a checkbox inside a for loop, so I want only the checkbox that is checked to have a name attribute. I tried but when I clicked on the second checkbox, the name of the first attribute is not removed. Here is my jQuery code:

$('select ,input[type=checkbox] ').on('change', function() {
  var selector = $(this).closest("tr")//get closest tr

  if(selector.find('input[type=checkbox]').prop("checked") == true){
    //visa_type
    selector.find('.visa_type').attr('name','visa_type');

    //processing_type
    selector.find(".processing_type").attr('name','processing_type');

    //traveldate
    selector.find('.travel_date').attr('name','travel_date');

  }else if(selector.find('input[type=checkbox]').prop("checked") == false){
    //visa_type
    selector.find('.visa_type').attr('name','');

    //processing_type
    selector.find(".processing_type").attr('name','');

    //traveldate
    selector.find('.travel_date').attr('name','');

  }

this is my index.html:

        <form name="form" method="POST" id="form">
            {% csrf_token %}

        <table class="table  table-bordered table-responsive" id="flip-scroll">
            <thead>
                <tr>
                    <th scope="col">Visa Option</th>
                    <th scope="col">Processing Type</th>
                    <th height="60" scope="col">Travel Date</th>
                    <th scope="col">Price</th>
    </tr>
            </thead>
            <tbody>

                {% for j in package %}
                                        <tr class="valid-container" data-id="{{ j.id }}">

                                            <td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox">&nbsp; <output class="visa_type" style="font-size:14.5px !important;">{{ j.visa_type }}</output></td>

                              <td height="52" width="158">
                                                <select class="custom-select processing_type" required>
                                                    <option value="{{ j.price }}" selected>Normal</option>
                                                    <option value="{{ j.express_price }}">Express</option>
                                                </select>
                                            </td>


                              <td width="190" height="60">

                                                <div class="input-group date" data-date-format="dd.mm.yyyy">
                                                    <div class="input-group mb-2">
                                                        <input  type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
                                                        <div class="input-group-text"><i class="ti-calendar"></i></div>
                                                        <div class="input-group-addon">
                                                        </div>
                                                        <div class="input-group-prepend">
                                                        </div>
                                                    </div>
                                                </div>

                                            </td>

                              <td width="166">{{ j.currency_type }}&nbsp;&nbsp; <output class="package_price">{{ j.price }}</output>.00</td>

                            </tr>
                {% endfor %}

            </tbody>
        </table>

        <button type="submit" class="btn btn-primary col-md-4 offset-md-4 mb-3" id="check">Next</button>

    </form>

this is screenshot of table:

Maybe if I post more code and fewer pictures, it would help. Maybe I'll create a fiddle or try to make my code runnable here in a sandbox.

Answer 1

As you need to select only one checkbox at a time you can remove checked from other checkboxes whenever any checkbox is checked using $('tbody > tr.checkbox').not(this).prop('checked',false); then you just need to loop through your trs to add or remove name attributes.

Demo Code :

 $('input[type=checkbox] ').on('change', function() { $('tbody > tr.checkbox').not(this).prop('checked',false);//remove checked from other checkbox //loop thrugh trs $("tbody > tr").each(function() { //add or remove name attribute var selector = $(this) if (selector.find('input[type=checkbox]').prop("checked") == true) { selector.find('.visa_type').attr('name', 'visa_type'); selector.find(".processing_type").attr('name', 'processing_type'); selector.find('.travel_date').attr('name', 'travel_date'); } else if (selector.find('input[type=checkbox]').prop("checked") == false) { selector.find('.visa_type').attr('name', ''); selector.find(".processing_type").attr('name', ''); selector.find('.travel_date').attr('name', ''); } }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered table-responsive" id="flip-scroll"> <thead> <tr> <th scope="col">Visa Option</th> <th scope="col">Processing Type</th> <th height="60" scope="col">Travel Date</th> <th scope="col">Price</th> </tr> </thead> <tbody> <tr class="valid-container"> <input type="hidden" class="id" value="1"> <td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox">&nbsp; <output class="visa_type" style="font-size:14.5px;important." value="90 days single visa">90 days single visa</output></td> <td height="52" width="158"> <select class="custom-select processing_type" required=""> <option value="15000" selected="">Normal</option> <option value="20000">Express</option> </select> </td> <td width="190" height="60"> <div class="input-group date" data-date-format="dd.mm.yyyy"> <div class="input-group mb-2"> <input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm;yyyy"> <div class="input-group-text"><i class="ti-calendar"></i></div> <div class="input-group-addon"> </div> <div class="input-group-prepend"> </div> </div> </div> </td> <td width="166">AED&nbsp;&nbsp. <output class="package_price">15000</output>:00</td> </tr> <tr class="valid-container"> <input type="hidden" class="id" value="2"> <td style="cursor;pointer;" width="200"><input type="checkbox" name="c1" class="checkbox">&nbsp: <output class="visa_type" style="font-size.14;5px.important." value="30 days">30 days</output></td> <td height="52" width="158"> <select class="custom-select processing_type" required=""> <option value="11" selected="">Normal</option> <option value="22">Express</option> </select> </td> <td width="190" height="60"> <div class="input-group date" data-date-format="dd.mm.yyyy"> <div class="input-group mb-2"> <input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd;mm;yyyy"> <div class="input-group-text"><i class="ti-calendar"></i></div> <div class="input-group-addon"> </div> <div class="input-group-prepend"> </div> </div> </div> </td> <td width="166">AED&nbsp.&nbsp: <output class="package_price">11</output>;00</td> </tr> <tr class="valid-container"> <input type="hidden" class="id" value="3"> <td style="cursor;pointer:" width="200"><input type="checkbox" name="c1" class="checkbox">&nbsp. <output class="visa_type" style="font-size;14.5px.important." value="90 days">90 days</output></td> <td height="52" width="158"> <select class="custom-select processing_type" required=""> <option value="22" selected="">Normal</option> <option value="33">Express</option> </select> </td> <td width="190" height="60"> <div class="input-group date" data-date-format="dd.mm.yyyy"> <div class="input-group mb-2"> <input type="text" class="form-control travel_date" value="dd.mm;yyyy" placeholder="dd;mm.yyyy"> <div class="input-group-text"><i class="ti-calendar"></i></div> <div class="input-group-addon"> </div> <div class="input-group-prepend"> </div> </div> </div> </td> <td width="166">AED&nbsp;&nbsp; <output class="package_price">22</output>.00</td> </tr> </tbody> </table>