在div中顯示復選框的選定值

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個錯誤。

1. 您selecteditems是id而不是類。
2. 您需要使用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

代替使用click事件，而使用on('change')事件。 使用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

如果您在事件后初始化所選變量，則每當您觸發按鈕/復選框時，它將被重新初始化，並且其存儲的值將丟失。 將您的代碼更改為以下經過測試的代碼。

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