[英]How to add name attribute if checkbox is checked and if it is unchecked than remove
$("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"> <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  . <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"> : <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 . : <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"> . <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 <output class="package_price">22</output>.00</td> </tr> </tbody> </table>
我在 for 循環中添加了一個復選框，因此我只希望選中的復選框具有名稱屬性。 我試過了，但是當我點擊第二個復選框時，第一個屬性的名稱沒有被刪除。 這是我的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','');
}
這是我的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"> <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 }} <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>
這是table:
也許如果我發布更多代碼和更少圖片，它會有所幫助。 也許我會創建一個小提琴或嘗試讓我的代碼在沙箱中運行。
因為您需要 select 一次只有一個checked ，所以只要使用$('tbody > tr.checkbox').not(this).prop('checked',false); 那么您只需要遍歷您的trs即可添加或刪除name屬性。
演示代碼：
$('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"> <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  . <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"> : <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 . : <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"> . <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 <output class="package_price">22</output>.00</td> </tr> </tbody> </table>
如何向 state 添加/刪除數據，具體取決於復選框是否已選中然后未選中
[英]how to add/remove data to state depending on if the checkbox was checked and then unchecked
如何知道如果選中復選框則將元素添加到數組，如果未選中則將其刪除？
[英]How to know add element to an array if checkbox is checked and remove it if unchecked?
如何將onchange屬性添加到JavaScript生成的復選框，該復選框在選中/未選中時會觸發？
[英]How do I add an onchange attribute to a JavaScript generated checkbox that fires when checked/unchecked?
取消選中/選中復選框時，javascript在div中添加/刪除文本
[英]javascript add/remove text in div when checkbox is unchecked/checked
選中和取消選中時，將復選框值添加到數組中/從數組中刪除復選框值（jQuery）
[英]Add/remove checkbox values to/from array when checked and unchecked (jQuery)
如何在html表中未選中的復選框的基礎上添加和刪除ID？
[英]How to append and remove ids on the basis of checkbox checked unchecked in html table?
如果選中復選框，如何調用函數，如果未選中則從附加列表中刪除
[英]How to call a function if checkbox checked and remove from appended list if unchecked
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.