Question

我正在尝试生成一个data属性的字符串（因此从M到F的字符）

附件是我的HTML

    <div id="days" class="checkbox">
        <label>
            <input data-date="M" type="checkbox"> Mon
        </label>
        <label>
            <input data-date="T" type="checkbox"> Tues
        </label>
        <label>
            <input data-date="W" type="checkbox"> Wed
        </label>
        <label>
            <input data-date="R" type="checkbox"> Thurs
        </label>
        <label>
            <input data-date="F" type="checkbox"> Fri
        </label>
    </div>

这是我的jQuery：

    $(function(){
        var days = '';
        $("input[type='checkbox']").change(function(){
            var item=$(this);
            if(item.is(":checked"))
            {
                days += ($('#days label input').data('date'));
            }
        });
    });

这就是程序的样子：

map_file

单击日期后会发生什么，是，我可以单击星期三复选框，但只会附加M。我会点击星期五复选框，并附加M。

M

MM

MMM

我如何附加MTWRF以及在取消点击时将其删除？

Answer 1

尝试在jquery中使用 .map() 函数。

像这样更新您的js代码

 $(function() {
     var days = '';
     $("input[type='checkbox']").change(function() {
         var searchIDs = $("input:checkbox:checked").map(function() {
             return $(this).data('date');
         }).toArray();
         console.log(searchIDs);
     });

 });

这是一个有效的 JSFIDDLE

Answer 2

您需要清除点击之间的天数变量，并在每次更改时迭代输入：

$("input[type='checkbox']").change(function () {
    var days = '';
    $("input[type='checkbox']").each(function () {
        if ($(this).is(":checked")) days += $(this).data('date');
    })
    console.log(days)
});

<强> jsFiddle example

Answer 3

您正在选择所有元素，而不是循环中的当前元素。当您读取数据时，它只选择第一个。使用map（）

$("input[type='checkbox']").change(function(){
    var days = $('#days label input:checked')  //get the checked inputs
        .map( function () {
            return $(this).data('date');  //return the data attribute
        }).get().join("");  //convert to array and than string
    console.log(days);
});

Answer 4

使用this代替'#days label input'来引用checked项。

在您的代码中，替换：

days += ($('#days label input').data('date'));

人：

days += ($(this).data('date'));

Answer 5

通过输入，它可以使用value属性。你可以这样做：

$('input[type="checkbox"]').change(function(){
    var days=$(this).map(function(){return this.val()/*or attr('data-date')*/;}).get();
    console.log(days);
});

jQuery.map会输入您输入值的数组，以便它看起来像['M','T','W','TH','F']

然后您可以使用.each将其转换为字符串说：

days.each(function(i){daysSting+=i});

从复选框单击添加字符串

5 个答案: