Question

我正在使用以下内容，以便在屏幕上显示复选框的每个值，当复选框显示在文本框中时，该复选框具有很好的效果。我想更改它，以便我可以在div中显示实时显示为html而不是文本框。

link to a working demo is here及以下是脚本。我知道这可能是一两条基本线，但我还在学习和新学。谢谢！

function updateTextArea() {         
    var allVals = [];
    $('#c_b :checked').each(function() {
        allVals.push($(this).val());
    });
    $('#t').val(allVals)
}
$(function() {
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});

Answer 1

使用以下命令将val附加到div，或者您可以将循环中的每个val附加到div。

$('div').append(allVals);

或将你的循环更改为：

$('#c_b :checked').each(function() {
        allVals.push($(this).val());
        $('div').append($(this).val());
    });

Answer 2

$('input[type=checkbox]').click(function(){
    var $self = $(this);

    if ( $self.is(':checked') )
        $('#target-div').append('<p>' + $self.val() + '</p>');

    else
        $('p').remove(':contains("' + $self.val() + '")');
});

Answer 3

你几乎得到了所有需要的代码，只有两个小的变化（一个明显的变化，另一个稍微不那么明显）。

而不是文本框，请使用：

<div id="d"></div>

将$('#t').val(allVals);更改为$('#d').html(allVals.toString());（我添加了一个分号以进行格式化。）您可以使用.text代替.html但是因为您在问题，我认为这更合适。

就是这样。虽然我可以使用.focus代替.click。这也应该有用。

Here's the demo on jsbin.

实时显示val作为div内部的html

3 个答案: