jQuery的兩個複選框的輸出數據值上的另一個複選框逗號分隔

Question

假設我有兩個複選框等這些（可以是100個複選框，因爲它會在while循環中推出）

<input type="checkbox" value="20" data="Apple"> 
<input type="checkbox" value="30" data="Mango"> 

我有兩個文本框我想要輸出值20 + 30 = 50和Apple，芒果。

<input type="text" id="value1"> // to output sum of values i.e., 50 
<input type="text" id="value2"> // to output comma separated data values Apple, Mango on select 

這裏我可以做第一個操作。但我不知道如何做第二個。我想要的是，當我檢查它們的總和值並將其輸出到第一個文本框時，當它取消選中任何一個方框時，它會將值減回去（它已經在工作，因爲我可以做到），第二個方塊應該輸出值Apple，芒果當兩個盒子分別檢查。如果任何框未選中，則說明數據值爲Mango的框，然後文本框的值將變成Apple（甚至逗號被移除）。這個怎麼做？這裏是我完成第一個操作的下面的currennt jQuery代碼。如何做第二個？這段代碼中還應該添加什麼？

$(document).ready(function(){ 
    $('input[type=checkbox]').change(function(){ 
    var total = 0; 
    $('input:checkbox:checked').each(function(){ 
     total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val()); 
    }); 
    $("#costdisplay").html(total); 
    $("input[name=amount]").val(total); 
    }); 
}); 

Answer 1

試試這個

$(document).ready(function(){ 
    $('input[type=checkbox]').change(function(){ 
    var total = 0; 
    var txt = ''; 
    $('input:checkbox:checked').each(function(){ 
     total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val()); 
     txt += $(this).attr('data')+', '; 
    }); 
    $("#costdisplay").html(total); 
    $("input[name=amount]").val(total); 
    $("#value2").val(txt.slice(0,-2)); 
    }); 
}); 

Answer 2

檢查下面的代碼對你的作品！

$(document).ready(function(){ 
 
    $('input[type=checkbox]').change(function(){ 
 
    var total = 0; 
 
    var dataval = ""; 
 
    $('input:checkbox:checked').each(function(){ 
 
     var val = $(this).val(); 
 
     total += isNaN(parseFloat(val)) ? 0 : parseInt(val); 
 
     dataval += $(this).attr('data') +", "; 
 
    }); 
 
    $("#value1").val(total); 
 
    $("#value2").val(dataval.slice(0,-2)); 
 
    }); 
 
});

<script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script> 
 

 

 
<input type="checkbox" value="20" data="Apple"> 
 
<input type="checkbox" value="30" data="Mango"> 
 

 

 
<input type="text" id="value1"> // to output sum of values i.e., 50 
 
<input type="text" id="value2">

Answer 3

您應該使用data-*前綴自定義屬性存儲任意數據，這些數據可以獲取使用$.fn.data(key).

$(document).ready(function() { 
 
    $('input[type=checkbox]').change(function() { 
 
    var $elem = $('input:checkbox:checked'), 
 
     $amount = $("input[name=amount]"), 
 
     $costdisplay = $("#costdisplay"), 
 
     dataValues = [], 
 
     total = 0; 
 
     
 
    if ($elem.length) { 
 
     
 
     $('input:checkbox:checked').each(function() { 
 
     total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val()); 
 
     dataValues.push($(this).data('value')); //Iterate and populate the array from custom attribute 
 
     }); 
 

 
    } 
 
    
 
    $amount.val(total); 
 
    $costdisplay.val(dataValues.join(',')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" value="20" data-value="Apple">Apple<br/> 
 
<input type="checkbox" value="30" data-value="Mango">Mango<br/> 
 

 
<input type="text" name="amount"> <br/> 
 
<input type="text" id="costdisplay"> <br/>

Answer 4

在計算總金額也使字符串具有數據值用逗號分隔符。

使用它下面的代碼片段：

$(document).ready(function(){ 
    $('input[type=checkbox]').change(function(){ 
    var total = 0; 
    var data = ''; 
    $('input:checkbox:checked').each(function(){ 
     total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val()); 
     if(data) { 
      data += ','+ $(this).attr('data'); 
     } else { 
      data += $(this).attr('data'); 
     } 
    }); 
    $("#costdisplay").html(total); 
    $("input[name=amount]").val(total); 
    $("#value2").val(data); 
}); 
});