dongqian5569
2017-06-16 11:25
浏览 196
已采纳

jQuery输出另一个复选框上分隔的两个复选框逗号的数据值

Suppose I have two checkbox like these (can be 100 checkboxes as it will be coming in a while loop)

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

And I have two textboxes where I want to output values 20+30 = 50 and Apple, Mango.

<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

Here I am able to do the first operation. But I am not sure how to do the second one. what I want is when I check the boxes its sums values and outputs it on 1st text box and when unchecks any box it deducts the values back (its already working as I was able to do it) and the second box should output values Apple, Mango when both boxes are checked respectively. If any box is unchecked say box with data value Mango then the textbox value will become Apple (even comma gets removed) only. How to do this? Here is my currennt jQuery code below for completing the 1st operation. How to do the second one? What else should I add here in this code?

$(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);
  });
});
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • drnf593779 2017-06-16 11:29
    已采纳

    Try this

    $(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));
      });
    });
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • dongyo1959 2017-06-16 11:32

    Check if below code works for you!

    $(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">

    </div>
    
    评论
    解决 无用
    打赏 举报
  • duanhan5230 2017-06-16 11:36

    You should use data-* prefixed custom attributes to store arbitrary data, which can be fetched using $.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/>

    </div>
    
    评论
    解决 无用
    打赏 举报
  • douliedai4838 2017-06-16 11:40

    While calculating the total amount also make string having the data value with comma separator.

    Use the below code snippet for it:

    $(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);
     });
    });
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题