在div中显示复选框的选定值 [英] Display the selected value of checkbox in a div

问题描述

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

I have two checkboxes and a div in the body and I would like to display the selected value of data-valuetwo inside the div, "contents".

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

谢谢您的帮助.

推荐答案

您的代码中有两个问题:

You have two issues in your code:

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

1) You have to use this keyword to target the current check box and

2)您正在使用类符号(.)代替id(#);

2) You are using class symbol (.) instead of 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()并且更清洁:

Though I prefer using map(), get() and join() which does not require substring() and lot more cleaner:

$(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()的解决方案:

Solution with DIV element, <br> and 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>

这篇关于在div中显示复选框的选定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！