Question

我希望在将每个值检查到checkbox时，从输入new Date()包含时间（textarea JS）获取一些值/文本。我的问题是所有值检查的时间结果总是相同吗？

请给我这个脚本的解决方案。 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

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

＆＃13;

$(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(', '));
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

$(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(', '));
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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 );
});

＆＃13;

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

＆＃13;

Answer 2

因为您每次都会从所有选中的checkbox推送新值。因此，最好检查checkbox是checked还是unchecked，并根据push和pop数组中的值进行检查。

<强> DEMO

$(function() {
    var values = [];
    $('.cb').on('click', function() {
        var d = new Date();
        var now = "(" + d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay() + "-" + d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds() + ")";
        if($(this).is(":checked"))//If is checked push the value
        {    
            values.push($(this).parent().text()+"-"+now);
        }
        else
        {
            values.pop($(this).parent().text()+"-"+now);//else pop it out
        }
        $("#CBX").val(values.join(', ')); //then the same routine
    });
});

Answer 3

您正在覆盖结果：

$("#CBX").val(values.join(', '));

尝试这样的事情：

$("#CBX").val($("#CBX").val() + values.join(', '));

当选中复选框时，如何获取值包括“time”onclick to textarea？

3 个答案: