Question

我的体内有两个复选框和一个div，我想在div内显示选定的data-valuetwo值，即“内容”。

$(document).ready(function() {
    $('.chkbx').click(function() {
        var selected = "";
        $('.chkbx:checked').each(function() {
            selected += $('.chkbx').attr('data-valuetwo') + ',';
        });
        selected = selected.substring(0, selected.length - 1);
        $('.selecteditems').val(selected);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input chkbx" value="654321" data-valuetwo="Mike" id="customCheck1" name="choice[]">
    <label class="custom-control-label" for="customCheck1">Mike</label>
</div>

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input chkbx" value="654321" data-valuetwo="Jason" id="customCheck2" name="choice[]">
    <label class="custom-control-label" for="customCheck2">Jason</label>
</div>

<div class="contents">
    <h3>Options Selected: </h3>
    <textarea id="selecteditems">
    </textarea>
</div>

谢谢您的帮助。

Answer 1

您在这里犯了2个错误。

您的selecteditems是一个非类的ID。
您需要使用this而不是类$(this).attr('data-valuetwo')

$(document).ready(function() {
        $('.chkbx').click(function() {
            var selected = "";
            $('.chkbx:checked').each(function() {
                selected += $(this).attr('data-valuetwo') + ',';
            });
            selected = selected.substring(0, selected.length - 1);
            $('#selecteditems').val(selected);
            $('#divId').html(selected);
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input chkbx" value="654321" data-valuetwo="Mike" id="customCheck1" name="choice[]">
    <label class="custom-control-label" for="customCheck1">Mike</label>
</div>

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input chkbx" value="654321" data-valuetwo="Jason" id="customCheck2" name="choice[]">
    <label class="custom-control-label" for="customCheck2">Jason</label>
</div>

<div class="contents">
    <h3>Options Selected: </h3>
    <textarea id="selecteditems">
    </textarea>
</div>

<div id="divId"></div>

Answer 2

您的代码中有两个问题：

1）您必须使用this关键字来定位当前复选框，并且

2）您正在使用类符号（.）而不是id（#）;

$(document).ready(function() {
    $('.chkbx').click(function() {
        var selected = "";
        $('.chkbx:checked').each(function() {
            selected += $(this).attr('data-valuetwo') + ',';
        });
        selected = selected.substring(0, selected.length - 1);
        $('#selecteditems').val(selected);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input chkbx" value="654321" data-valuetwo="Mike" id="customCheck1" name="choice[]">
    <label class="custom-control-label" for="customCheck1">Mike</label>
</div>

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input chkbx" value="654321" data-valuetwo="Jason" id="customCheck2" name="choice[]">
    <label class="custom-control-label" for="customCheck2">Jason</label>
</div>

<div class="contents">
    <h3>Options Selected: </h3>
    <textarea id="selecteditems">
    </textarea>
</div>

尽管我更喜欢使用map()，get()和join()，它们不需要substring()并且更清洁：

$(document).ready(function() {
    $('.chkbx').click(function() {
        var selected = $('.chkbx:checked').map(function() {
            return $(this).attr('data-valuetwo');
        }).get().join(',');
        $('#selecteditems').val(selected);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input chkbx" value="654321" data-valuetwo="Mike" id="customCheck1" name="choice[]">
    <label class="custom-control-label" for="customCheck1">Mike</label>
</div>

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input chkbx" value="654321" data-valuetwo="Jason" id="customCheck2" name="choice[]">
    <label class="custom-control-label" for="customCheck2">Jason</label>
</div>

<div class="contents">
    <h3>Options Selected: </h3>
    <textarea id="selecteditems">
    </textarea>
</div>

使用DIV元素<br>和html()的解决方案：

$(document).ready(function() {
    $('.chkbx').click(function() {
        var selected = $('.chkbx:checked').map(function() {
            return $(this).attr('data-valuetwo');
        }).get().join('<br>');
        $('#selecteditems').html(selected);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input chkbx" value="654321" data-valuetwo="Mike" id="customCheck1" name="choice[]">
    <label class="custom-control-label" for="customCheck1">Mike</label>
</div>

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input chkbx" value="654321" data-valuetwo="Jason" id="customCheck2" name="choice[]">
    <label class="custom-control-label" for="customCheck2">Jason</label>
</div>

<div class="contents">
    <h3>Options Selected: </h3>
    <div id="selecteditems">
    </div>
</div>

Answer 3

使用on('change')事件代替使用click事件。使用this获取事件处理程序中复选框的data-valuetwo值。

$(document).ready(function() {
    var selected = "";
    $('.chkbx').on('change', function() {
        selected += $(this).attr('data-valuetwo') + ',';
        selected = selected.substring(0, selected.length - 1);
        $('#selecteditems').val(selected);
    });
});

Answer 4

您可以使用prop来检查该复选框是否被选中。然后用变量连接值，并使用val在textarea中显示。取消选中时，可以使用字符串替换删除复选框的值并更新文本区域

$(document).ready(function() {
  let textAreaVal = '';
  $('.chkbx').click(function() {
    if ($(this).prop("checked")) {
      textAreaVal += ' ' + $(this).data('valuetwo');
    } else {
      let data = $(this).data('valuetwo')
      textAreaVal = textAreaVal.replace(new RegExp(data, "g"), "");
    }
    $('#selecteditems').val(textAreaVal.trim())
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input chkbx" value="654321" data-valuetwo="Mike" id="customCheck1" name="choice[]">
  <label class="custom-control-label" for="customCheck1">Mike</label>
</div>

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input chkbx" value="654321" data-valuetwo="Jason" id="customCheck2" name="choice[]">
  <label class="custom-control-label" for="customCheck2">Jason</label>
</div>

<div class="contents">
  <h3>Options Selected: </h3>
  <textarea id="selecteditems">
    </textarea>
</div>

Answer 5

如果在事件后初始化 selected 变量，则每当触发按钮/复选框时，它将被重新初始化，并且其存储的值将丢失。将您的代码更改为以下经过测试的代码。

$(document).ready(function () {
                var selected = "";
                $('.chkbx').change(function () {
                    selected += $(this).attr('data-valuetwo') + ',';
                    selected = selected.substring(0, selected.length - 1);
                    $('#selecteditems').val(selected);
                });
            });

在div中显示复选框的选定值

5 个答案: