3 回答

TA貢獻1847條經驗 獲得超7個贊
您可以通過將<input>元素包裝在<form>標簽中并偵聽change表單上的事件來簡化此操作。每當用戶選中或取消選中復選框時,都會發生更改事件。每當發生更改時,使用.serializeArray()獲取包含在表單中檢查的所有值的數組。然后使用.map()數組的方法僅從每個檢查的輸入中獲取 id 值,并將這些值連接起來.join(),將數組轉換為 id 以逗號分隔的字符串。并使用data-id新字符串設置結果。
$('.user-form').on('change', function(event) {
var $form = $(this);
var data = $form.serializeArray();
var users = data.map(({ value }) => value).join(', ');
$('.block').attr('data-id', users);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="user-form">
<input type="checkbox" name="user" value="121asa31" class="user">
<input type="checkbox" name="user" value="121fdfd31" class="user">
<input type="checkbox" name="user" value="1213fd1" class="user">
<input type="checkbox" name="user" value="121jh31" class="user">
</form>
<div class="block" data-id="">
Some Content
</div>
用戶和組示例
function filterIdsByName(name, data) {
return data
.filter(item => item.name === name)
.map(({ value }) => value)
.join(', ');
}
$('.user-form').on('change', function(event) {
var $form = $(this);
var data = $form.serializeArray();
var groups = filterIdsByName('group', data);
var users = filterIdsByName('user', data);
$('.block-groups').attr('data-group-id', groups);
$('.block-groups').html(`Group ids: ${groups}`);
$('.block-users').attr('data-user-id', users);
$('.block-users').html(`User ids: ${users}`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="user-form">
<input type="checkbox" name="user" value="121asa31" class="user">
<input type="checkbox" name="user" value="121fdfd31" class="user">
<input type="checkbox" name="user" value="1213fd1" class="user">
<input type="checkbox" name="user" value="121jh31" class="user">
<input type="checkbox" name="group" value="1213fd1" class="check group">
<input type="checkbox" name="group" value="121jh31" class="check group">
</form>
<div class="block-users" data-user-id="">
Some Content
</div>
<div class="block-groups" data-group-id="">
Some Content
</div>

TA貢獻1831條經驗 獲得超9個贊
您正在尋找的是一個列表而不是一個數組。對于復選框,您希望使用changenot click,因為單擊可能會無意觸發。
您始終可以將一個名為 users 的變量設置為一個數組,然后簡單地修改該數組,然后使用它來設置 data-id。
我還更新了函數以在負載時運行并且更簡單。
function save_users(){
var users = [];
$(".user:checked").each(function(){
users.push($(this).attr('id'));
});
users = users.join(",");
$('.block').attr('data-id', users);
}
$('.user').on('change', function() {
save_users();
});
save_users();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="121asa31" class="user">
<input type="checkbox" id="121fdfd31" class="user">
<input type="checkbox" id="1213fd1" class="user">
<input type="checkbox" id="121jh31" class="user" checked>
<div class="block" data-id="">
Some Content
</div>

TA貢獻1817條經驗 獲得超6個贊
Javascript香草解決方案
let checkboxes = document.getElementsByClassName("user");
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener("change", checkBoxChanged);
}
let checkedIDs = [];
function checkBoxChanged() {
if (event.target.checked) {
checkedIDs.push(event.target.id);
} else {
if (checkedIDs.indexOf(event.target.id) > -1) {
checkedIDs.splice(checkedIDs.indexOf(event.target.id), 1)
}
}
console.log(checkedIDs);
let myDiv = document.getElementsByClassName("block")[0];
myDiv.setAttribute("id", checkedIDs);
}
<input type="checkbox" id="121asa31" class="user">
<input type="checkbox" id="121fdfd31" class="user">
<input type="checkbox" id="1213fd1" class="user">
<input type="checkbox" id="121jh31" class="user">
<div class="block" data-id="">
Some Content
</div>
添加回答
舉報