jQuery-基于一個attr值，只獲取選中復選框的唯一值

我正在回圈瀏覽一些復選框，并為每個復選框執行.ajax呼叫。問題是，每個復選框的名稱屬性可能是重復的。因此，我希望只對具有唯一名稱屬性的復選框執行.ajax。

以下是我的腳本

var elements = $("input:checkbox:checked" /span>)

var i = 0;
doLoop（）。

function doLoop() {
    if ( i >= elements.length ) {
        return;
    }

    // 要獲得我們所要的元素。$(elements[i])
    let e = $（elements[i]）。
    var id = e.attr（'name'）。
    var val = e.val（）。
    $.ajax（{
        async : false,
        url："import.php"。
        method:"POST"。
        data:{id:id, val:val},
        success:function(data) {
            //do some action(data)。
            i  
            doLoop()
        }
    });
}

我曾試圖在這里找到一些類似的主題，但沒有成功。

因此，如果我有以下的復選框被選中

< input type="checkbox" class="form-check- input selected-checkbox" value="some text 1" name="smalltalk">
<input type="checkbox" class="form-check-input selected-checkbox" value="some text 2" name="smalltalk">
<input type="checkbox" class="form-check-input selected-checkbox" value="some text 3" name="smalltalk">
<input type="checkbox" class="form-check-input selected-checkbox" value="some text 4" name="smalltalk">

對于每個名稱屬性smalltalk的4個.ajax呼叫，它應該只做一次呼叫。

uj5u.com熱心網友回復：

你可以使用jQuery的.serializeArray()方法來給你整個表單的資料：

let data = $（'form'）.serializeArray（）。
console.log( data ) 。

輸出：

[{
        "name"。"smalltalk"。
        "value": "一些文本1"。
    },
    {
        "name": "smalltalk",
        "value": "一些文本3"。
    },
    {
        "name": "其他",
        "value": "一些其他的文本2"。
    },
    {
        "name": "其他",
        "value": "一些其他的文本4"。
    }
]

你可以根據你的需要重新組織，例如：

letgroupedData = Object. entries(data.reduce((acc, cur) =>({.
    ...acc。
    [cur.name]。(acc[cur.name] || []).concat(cur.value)
}), {}));
console.log( groupedData ) 。

輸出：

[
    [
        "smalltalk"/span>。
        
            "一些文本1"。
            "一些文本3"。
        ]
    ],
    [
        "其他"。
        [
            "一些其他的文本2"。
            "其他一些文字4", "其他一些文字4".
        ]
    ]
]  

DEMO

顯示代碼片段

let data = $('form').serializeArray() 。
console.log( data ) 。
console.log( data.reduce((acc,cur) => /span>({. .acc,[cur.name]:(acc[cur.name] || []).concat(cur.value)}) ,{}) ) 。
console.log( Object. entries( data.reduce((acc,cur) =>  ({. .acc,[cur.name]:(acc[cur.name] || []).concat(cur.value)}) ,{}) );

<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<form> 
小型談話
< input type="checkbox" class="form-check-input selected- checkbox" value="some text 1" name="smalltalk" checked> 
< input type="checkbox"/span> class="form-check- input selected-checkbox" value="some text 2" name="smalltalk" > 
< input type="checkbox" class="form-check-input selected- checkbox" value="some text 3" name="smalltalk" checked> 
< input type="checkbox"/span> class="form-check- input selected-checkbox" value="some text 4" name="smalltalk" > 
<br><br> 
其他
< input type="checkbox" class="form-check- input selected-checkbox" value="some other text 1" name="other"> 
< input type="checkbox" class="form-check-input selected- checkbox" value="some other text 2" name="other" checked> 
< input type="checkbox"/span> class="form-check- input selected-checkbox" value="some other text 3" name="other"> 
< input type="checkbox" class="form-check-input selected- checkbox" value="some other text 4" name="other" checked> 
</form> 

uj5u.com熱心網友回復：

我決定采用一個簡單的（不知道從性能的角度來看效果如何）方法。

在.ajax成功后，我將id值分配給另一個名為cid的變數（cid = id;），因此我可以得到通過.ajax的最后一個值，然后將回圈中的新值與最后一個值進行比較（if (id != cid) {）。

所以這就是我最終得到的結果

var elements = $("input:checkbox:checked" /span>)
var cid;
var i = 0;
doLoop（）。

function doLoop() {
    if ( i >= elements.length ) {
        return;
    }

    // 要獲得我們所要的元素。$(elements[i])
    let e = $（elements[i]）。
    var id = e.attr（'name'）。
    var val = e.val（）。
    if (id != cid) {
        $.ajax（{
            async : false,
            url："import.php"。
            method:"POST"。
            data:{id:id, val:val},
            success:function(data) {
                cid = id;
                //do some action
                i  
                doLoop()
            } 
        });
    } else {
        s  ;
        doiLoop（）。
        }
  

標籤：

上一篇：一些Javascript代碼不作業，只有jquery代碼

下一篇：如何忽略更新方法中沒有資料的輸入