[英]how can i get sum of checkbox value and textbox value in another textbox when checkbox is checked or if checkbox unchecked remove the value
[英]How do i checked another checkbox when i checked a checkbox(same class) and insert value into a textbox
我有一個具有相同類的復選框,基本上它的作用是,如果我選中該復選框,它將檢查與該復選框相同的類,並且它將返回值。 但是它不會直接返回,我需要單擊某個地方,然后將其注冊到文本框。 當我選中復選框時,我需要的是直接輸入文本框的值。 該表代碼來自php,因此class + number將會更改,並且無法修復。
以下是其片段。
function doSomethingElse(row) { //select all checkboxes with name userid that are checked var checkboxes = document.querySelectorAll("input[name='student_name[]']:checked") var values = ""; //append values of each checkbox into a variable (seperated by commas) for (var i = 0; i < checkboxes.length; i++) { values += checkboxes[i] .value + "," } //remove last comma values = values.slice(0, values.length - 1) //set the value of input box document.getElementById("stud_name").value = values; } $("input:checkbox").change(function() { //alert('Ok!'); var value = $(this).attr("class"); $(":checkbox[class='" + value + "']").prop("checked", this.checked); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr onclick="doSomethingElse(this);"> <td><input type="checkbox" class="something1" name="user_id[]" value='' /></td> <td><input type="checkbox" class="something1" name="student_name[]" value='1' /></td> <td><input type="checkbox" class="something2" name="student_name[]" value='' /></td> <td><input type="checkbox" class="something2" name="user_id[]" value='2' /></td> </tr> </table> <input class="form-control" name="stud_name" id="stud_name" type="text" maxlength="255" />
嘗試使用$("input:checkbox").click(function () {
代替change
function doSomethingElse(row){ //select all checkboxes with name userid that are checked var checkboxes = document.querySelectorAll("input[name='student_name[]']:checked") var values = ""; //append values of each checkbox into a variable (seperated by commas) for(var i=0;i<checkboxes.length;i++){ values += checkboxes[i].value + "," } //remove last comma values = values.slice(0,values.length-1); //set the value of input box document.getElementById("stud_name").value = values; } $("input:checkbox").click(function () { //alert('Ok!'); var value = $(this).attr("class"); $(":checkbox[class='" + value + "']").prop("checked", this.checked); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr onclick="doSomethingElse(this);"> <td><input type="checkbox" class ="something1"name="user_id[]" value='ID1' /></td> <td><input type="checkbox" class ="something1"name="student_name[]" value='NAME1' /></td> <td><input type="checkbox" class ="something2"name="student_name[]" value='NAME2' /></td> <td><input type="checkbox" class ="something2"name="user_id[]" value='ID2' /></td> </tr> </table> <input class="form-control" name="stud_name" id="stud_name" type="text" maxlength="255" />
很難從問題中確切地找出您想要什么,但是我已經嘗試了一下。
首先,您的HTML是否有錯誤? 應該是以下情況:
<td><input type="checkbox" class="something2" name="student_name[]" value='' /></td>
<td><input type="checkbox" class="something2" name="user_id[]" value='2' /></td>
實際上是:
<td><input type="checkbox" class="something2" name="student_name[]" value='2' /></td>
<td><input type="checkbox" class="something2" name="user_id[]" value='' /></td>
注意這些值交換了。
我認為要解決您的問題,您可以像下面這樣在onchange中完成所有工作:
$("input:checkbox").change(function () { //alert('Ok!'); var value = $(this).attr("class"); $(":checkbox[class='" + value + "']").prop("checked", this.checked); var checkboxes = $("input[name='student_name[]']:checked"); var values = ""; //append values of each checkbox into a variable (seperated by commas) for(var i=0;i<checkboxes.length;i++) { values += checkboxes[i].value + "," } //remove last comma values = values.slice(0,values.length-1) //set the value of input box $("#stud_name").val(values); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td><input type="checkbox" class ="something1"name="user_id[]" value='' /></td> <td><input type="checkbox" class ="something1"name="student_name[]" value='1' /></td> <td><input type="checkbox" class ="something2"name="student_name[]" value='2' /></td> <td><input type="checkbox" class ="something2"name="user_id[]" value='' /></td> </tr> </table> <input class="form-control" name="stud_name" id="stud_name" type="text" maxlength="255" />
我也嘗試過改善您的格式,並堅持只使用jquery選擇器
我讓你為她作工; https://jsfiddle.net/nd01p86t/15/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="checkbox" class="something1" name="user_id[]" value='' /></td>
<td><input type="checkbox" class="something1" name="student_name[]" value='1' /> </td>
<td><input type="checkbox" class="something2" name="student_name[]" value='' /> </td>
<td><input type="checkbox" class="something2" name="user_id[]" value='2' /></td>
</tr>
</table>
<input class="form-control" name="stud_name" id="stud_name" type="text" maxlength="255" />
功能...
function doSomethingElse(row) {
//select all checkboxes with name userid that are checked
var checkboxes = document.querySelectorAll("input[name$='[]']:checked")
// OR...
//var checkboxes = document.querySelectorAll("input[type='checkbox']:checked")
//append values of each checkbox into a variable (seperated by commas)
var values = Array.from(checkboxes).filter( checkbox => checkbox.value ).map( checkbox => checkbox.value ).join(',');
//set the value of input box
document.getElementById("stud_name").value = values;
}
// Attach to the table and delegate 'click' per row
$("table").delegate("tr", "click", doSomethingElse);
$("input:checkbox").click(function() {
//alert('Ok!');
var value = $(this).attr("class");
$(":checkbox[class='" + value + "']").prop("checked", this.checked);
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.