<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CheckboxDemo.aspx.cs" Inherits="WebApplicationApiUpload.CheckboxDemo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBoxList data-toggle="radio" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="TGJU"> TG </asp:ListItem>
<asp:ListItem Value="GOLDOZ"> Gold </asp:ListItem>
<asp:ListItem Value="SILVEROZ"> Silver </asp:ListItem>
</asp:CheckBoxList>
</div>
<div>
<asp:CheckBoxList data-toggle="radio" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="TGJU"> TG </asp:ListItem>
<asp:ListItem Value="GOLDOZ"> Gold </asp:ListItem>
<asp:ListItem Value="SILVEROZ"> Silver </asp:ListItem>
</asp:CheckBoxList>
</div>
</form>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
// turn all CheckBoxLists labeled for 'radio' to be single-select
$('[data-toggle=radio]').each(function () {
var clientId = $(this).attr('id');
$(this).find('input').each(function () {
// set parent's id
$(this).attr('data-parent', clientId);
// add an onclick to each input
$(this).click(function (e) {
// ensure proper event
if (!e) e = window.event;
var sender = e.target || e.srcElement;
if (sender.nodeName != 'INPUT') return;
// toggle off siblings
var id = $(this).attr('id');
var parent = $(this).attr('data-parent');
$('input[data-parent=' + parent + ']').not('#' + id).prop('checked', false);
});
});
});
});
</script>
</body>
</html>
Không có nhận xét nào:
Đăng nhận xét