How to resolve display issues when implementing 'Select All' functionality

[callmeitachi]

Hello, I'm very interested in the Leptos framework. Recently, I've been trying to use this framework for some projects, but I encountered a problem when implementing the 'select all' functionality. If I only click the 'select all' button, it works normally. However, if I first click on individual rows and then click the 'select all' button, previously clicked rows don't get selected during the full selection, or when deselecting all, the previously selected rows remain visibly selected. The checked property changes correctly, but the UI doesn't display properly. Here's the code I've written:

     let (res_data,set_res_data)=signal(data);
     let (selected_rows,set_selected_rows)=signal(HashSet::new());
     let is_selected=move |id| {
  
    let a=selected_rows.with(|set| set.contains(&id));

    a

};
let is_all_selected=move || {
    let data_len=res_data.get().len();

    let a=selected_rows.with(|set| set.len() == data_len);
    a
};
let toggle_all=move |_| {
    let data_len=res_data.get().len();
    let a=selected_rows.get().len();
    if data_len == a {
     
        set_selected_rows.update(|set| set.clear());
    } else {
       
        set_selected_rows.update(|set| {
            *set=res_data.get().into_iter().map(|data| data.id).collect();
        })
    }
};


let toggle_row=move |id| {


    set_selected_rows.update(|set| {
        if set.contains(&id) {
            set.remove(&id);
        } else {
            set.insert(id);
        }
    })
};
view! {
    <table>
        <thead class="bg-gray-50 sticky top-0 z-10">
            <tr>
                // {}
                <th class="w-16 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider sticky left-0 bg-gray-50">
                    <input
                        type="checkbox"
                        class="form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
                        checked=move || is_all_selected
                        on:click=toggle_all
                    />
                </th> 
                // {}
                // <th class="w-10 border px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider sticky left-16 bg-gray-50">
                //     
                // </th>
                {columns
                    .into_iter()
                    .map(|column| {
                        view! {
                            <th class=format!(
                                "{} px-6 py-3 bg-red-400 text-center text-xs font-medium text-gray-500 uppercase tracking-wider",
                                column.width,
                            )>{column.label}</th>
                        }
                    })
                    .collect::<Vec<_>>()}
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            {res_data
                .get()
                .into_iter()
                .map(|row| {
                    view! {
                        <tr>

                            <td class="text-center w-16 px-6 py-4 sticky left-0 bg-white">
                                <input
                                    type="checkbox"
                                    class="form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out"
                                    checked=move || is_selected(row.id)
                                    on:click=move |_| toggle_row(row.id)
                                />
                            </td>

                            <td class="border text-center">{row.system_name}</td>
                            <td class="border text-center">{row.nlayer}</td>
                            <td class="border text-center">{row.system_seg_name}</td>
                            <td class="border text-center">{row.ne}</td>
                            <td class="border text-center">{row.optical_standard}</td>
                            <td class="border text-center">{row.optical_now}</td>
                        

                    }
                })
                .collect::<Vec<_>>()}
        </tbody>
    </table>
}

[myrpg-fun]

first, you use checked=move || is_all_selected, but is_all_selected is a closure, so you should call it checked=move || is_all_selected() or use as closure checked=is_all_selected

[myrpg-fun]

Second thing:
try to use prop:checked instead of checked

1. checked (HTML attribute):
   Is treated as an HTML attribute, which it can only affects the initial state

2. prop:checked (DOM property):
   Sets the actual DOM element property

[callmeitachi]

With your help, the problem has been perfectly solved. Thank you!