javascript - 选中复选框时如何获取包含 "time"onclick 到文本区域的值？

Question

我想从输入 checkbox 中获取一些值/文本，包括时间(new Date() JS)，当选中每个值到 textarea .我的问题是所有检查值的时间结果总是相同？

请给我这个脚本的解决方案。 http://jsfiddle.net/zNfju/83/

$(function() {
    $('.cb').on('click', function() {
        var values = [];
        var d = new Date();
        var now = "(" + d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay() + "-" + d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds() + ")";
        
        $('input:checked').map(function() {
            values.push($(this).parent().text()+"-"+now);
        });
        $("#CBX").val(values.join(', '));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label><input type="checkbox" class="cb"/>Chechkbox1</label><br />
<label><input type="checkbox" class="cb"/>Chechkbox2</label><br />
<label><input type="checkbox" class="cb"/>Chechkbox3</label><br />
<label><input type="checkbox" class="cb"/>Chechkbox4</label><br />
<label><input type="checkbox" class="cb"/>Chechkbox5</label><br />
<label><input type="checkbox" class="cb"/>Chechkbox6</label><br />
<textarea id="CBX" rows="10" style="width:100%"></textarea>

谢谢:)

Answer 1

每次单击选项时，您都会计算当前日期，并将其用于所有选中的输入。如果您不想这样做，请在单击时将时间/日期保存在某处，例如在数据属性中。然后使用数据属性代替渲染。

$(function() {
    $('.cb').on('click', function() {
        var values = [];
        var d = new Date();
        var now = "(" + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate() + "-" + d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds() + ")";
        $(this).data( "date", now );
        
        $('input:checked').map(function() {
            values.push($(this).parent().text()+"-"+$(this).data( "date" ));
        });
        $("#CBX").val(values.join(', '));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label><input type="checkbox" class="cb"/>Checkbox1</label><br />
<label><input type="checkbox" class="cb"/>Checkbox2</label><br />
<label><input type="checkbox" class="cb"/>Checkbox3</label><br />
<label><input type="checkbox" class="cb"/>Checkbox4</label><br />
<label><input type="checkbox" class="cb"/>Checkbox5</label><br />
<label><input type="checkbox" class="cb"/>Checkbox6</label><br />
<textarea id="CBX" rows="10" style="width:100%"></textarea>

---

如果您在加载页面时已经选中了复选框，则可以使用它们自己的“data-date”属性呈现每个选中的标签。它看起来像这样。这假设您在服务器上有此信息。

$(function() {
    $('.cb').on('click', function() {
        var values = [];
        var d = new Date();
        var now = "(" + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate() + "-" + d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds() + ")";
        $(this).data( "date", now );
        
        $('input:checked').map(function() {
            values.push($(this).parent().text()+"-"+$(this).data( "date" ));
        });
        $("#CBX").val(values.join(', '));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label><input type="checkbox" class="cb" checked data-date="(2015-8-25-10-8-14)" />Checkbox1</label><br />
<label><input type="checkbox" class="cb"/>Checkbox2</label><br />
<label><input type="checkbox" class="cb" checked data-date="(2015-8-25-10-8-21)" />Checkbox3</label><br />
<label><input type="checkbox" class="cb"/>Checkbox4</label><br />
<label><input type="checkbox" class="cb"/>Checkbox5</label><br />
<label><input type="checkbox" class="cb"/>Checkbox6</label><br />
<textarea id="CBX" rows="10" style="width:100%"></textarea>

如果服务器上没有此数据，您可以将当前日期动态添加到所有已选中的复选框。

var d = new Date();
var now = "(" + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate() + "-" + d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds() + ")";

$(function() {
    $('.cb').on('click', function() {
        var values = [];
        var d = new Date();
        var now = "(" + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate() + "-" + d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds() + ")";
        $(this).data( "date", now );
        
        $('input:checked').map(function() {
            values.push($(this).parent().text()+"-"+$(this).data( "date" ));
        });
        $("#CBX").val(values.join(', '));
    }).filter( ":checked" ).data( "date", now );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label><input type="checkbox" class="cb" checked/>Checkbox1</label><br />
<label><input type="checkbox" class="cb"/>Checkbox2</label><br />
<label><input type="checkbox" class="cb" checked/>Checkbox3</label><br />
<label><input type="checkbox" class="cb"/>Checkbox4</label><br />
<label><input type="checkbox" class="cb"/>Checkbox5</label><br />
<label><input type="checkbox" class="cb"/>Checkbox6</label><br />
<textarea id="CBX" rows="10" style="width:100%"></textarea>