Bagaimana untuk menyahtanda satu kotak pilihan selepas menandai kotak pilihan lain?-Soal Jawab Rangkaian PHP Cina

我正在使用 Symfony 框架，并且有一个由 EasyAdmin 插件自动生成的表单。我需要此表单仅显示无线电输入字段，但无论出于何种原因，EasyAdmin 都会创建复选框，而我还没有找到更改它的方法。

我遇到的问题是，当用户选中其中一个复选框时，必须取消选中所有其他复选框。换句话说，模拟无线电输入。

以下是创建复选框的 HTML：

请注意，此复选框已选中。要取消选中复选框，请将属性btn-success更改为btn-danger，并添加另一个名为“off”的属性，第一个 div 的类声明。

    Yes No

我的代码目前看起来像这样

$('#main').find('table .toggle input[type="checkbox"]').change(function() { $('#main').find('div .toggle .btn .btn-xs .btn-success').not($(this)).removeClass("on").removeClass("btn-success").addClass("btn-danger").addClass("off");

控制台中没有错误消息；任何帮助是极大的赞赏;过去两天这让我发疯:( });

下面是当前不起作用的表单和 JavaScript：

$('#main').find('table .toggle input[type="checkbox"]').change(function() { $('#main').find('div .toggle .btn .btn-xs .btn-success').not($(this)).removeClass("on").removeClass("btn-success").addClass("btn-danger").addClass("off"); });

         ID      Name      Start date      End date      Current    Actions  
 
    4   SY 2022-2023   2022-07-01   2023-06-30    YesNo
 
   View Edit Delete  
   3   SY 2021-2022   2021-07-01   2022-06-30    YesNo
 
   View Edit Delete  
   2   SY 2019-2020   2019-07-01   2020-06-30    YesNo
 
   View Edit Delete  
   1   SY 2020-2021   2020-07-01   2021-06-30    YesNo
 
   View Edit Delete

let $mainTable = $('#main').find('table tbody'); $mainTable.on('change', 'input[type="checkbox"]', function(event) { let $me = $(this); $me.prop("checked", true); let $parent = $(event.delegateTarget); let checks = $parent.find('input[type="checkbox"]'); checks.not($me).prop("checked", false); checks.not($me).toggleClass('btn-danger off', true); $me.toggleClass("btn-success on", true).toggleClass('btn-danger off', false); // show the classes when checked/unchecked //console.log([...this.classList]); }); // set up the first one as checked to mimic requirement; could be any one $mainTable.find('input[type="checkbox"]') .first(':checked)') .trigger('change'); // now what classes it has we can log those //console.log([...$mainTable.find('input[type="checkbox"]').first(':checked)')[0].classList]);

ID	Name	Start date	End date	Current	Actions
4	SY 2022-2023	2022-07-01	2023-06-30	YesNo	View Edit Delete
3	SY 2021-2022	2021-07-01	2022-06-30	YesNo	View Edit Delete
2	SY 2019-2020	2019-07-01	2020-06-30	YesNo	View Edit Delete
1	SY 2020-2021	2020-07-01	2021-06-30	YesNo	View Edit Delete

membalas semua (2)

P粉7656846022023-09-03 16:34:18 Tingkat 2

Anda boleh mengaitkan meja dan kemudian menggunakannya untuk mencari kotak pilihan. Saya menggunakan yang pertama diperiksa untuk menetapkan keadaan awal, tetapi jika tidak, anda mungkin perlu menyesuaikannya.

Mungkin memerlukan perincian lebih sedikit, hanya untuk menjadikan penyelesaiannya lebih jelas.

Setiap komen menjadikannya sentiasa terbuka. Jika anda ingin menghidupkan/mematikan secara berprogram, anda boleh'change'事件更改为click

Suka+0

Tambah Balasan

P粉3114649352023-09-03 11:19:13 Tingkat 1

Anda boleh memanipulasi kelas kotak pilihan dalam pengendali acara perubahan. Ini bukan cara anda menanda/menyahtanda kotak pilihan.

Sila baca iniTandakan/nyahtanda kotak semak menggunakan jquery?dan inijQuery. Bagaimana untuk menyahtanda semua kotak pilihan kecuali satu (sudah ditanda)

Berikut adalah kaedah operasi khusus:

$('#main').find('table .toggle input[type="checkbox"]').change(function() { $('table .toggle input[type="checkbox"]').prop('checked', false); $(this).prop('checked', true); });

Berikut ialah contoh yang berfungsi:https://jsfiddle.net/fL9dknp7/