一组复选框(三个复选框)选择其中一个;只允许选择一个复选框功能实现

HTML脚本

  <div class="col-md-10" id="BoxGroup">
                    <span class="GoodsBarCode" ><input type="checkbox" value="货品"  /><label>货品</label></span>  
                    <span class="BatchBarCode"><input type="checkbox" value="批次码"  /><label>批次码</label></span> 
                    <span class="OneBarCode" > <input type="checkbox" value="唯一码"/><label>唯一码</label></span>  
                </div>

JS脚本

    $(function () {
            $('#BoxGroup').find('input[type=checkbox]').bind('click', function () {
                $(this).attr("checked", true);
 
                $('#checkBoxGroup').find('input[type=checkbox]').not(this).attr("checked", false);
            });

})

 

//取到当前复选框选中的值

   $("#BoxGroup:checkbox[checked]").each(function (i) {
                ImportType= $(this).val();
            });

 

  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当使用 Ant Design 和 TypeScript 来创建带有 key 值的多框组,并实现功能时,你可以按照以下步骤进行操作: 1. 首先,确保你已安装并正确导入了 `antd` 组件库以及相关依赖。 2. 在你的组件中,创建一个状态变量来保存中的框值以及全状态。同时,定义一个项列表数组,每个项都包含一个唯一的 key 值。 ```tsx import React, { useState } from 'react'; import { Checkbox } from 'antd'; const options = [ { key: 'option1', label: 'Option 1' }, { key: 'option2', label: 'Option 2' }, { key: 'option3', label: 'Option 3' }, ]; const CheckboxGroupExample: React.FC = () => { const [checkedList, setCheckedList] = useState<string[]>([]); const [indeterminate, setIndeterminate] = useState<boolean>(false); const [checkAll, setCheckAll] = useState<boolean>(false); // 处理单个框的中 const handleCheckboxChange = (checkedValues: string[]) => { setCheckedList(checkedValues); setIndeterminate(!!checkedValues.length && checkedValues.length < options.length); setCheckAll(checkedValues.length === options.length); }; // 处理全框的中 const handleCheckAllChange = (e: React.ChangeEvent<HTMLInputElement>) => { const checked = e.target.checked; setCheckedList(checked ? options.map(option => option.key) : []); setIndeterminate(false); setCheckAll(checked); }; return ( <div> <div style={{ borderBottom: '1px solid #E9E9E9' }}> <Checkbox indeterminate={indeterminate} onChange={handleCheckAllChange} checked={checkAll} > 全 </Checkbox> </div> <br /> <Checkbox.Group options={options} value={checkedList} onChange={handleCheckboxChange} /> </div> ); }; export default CheckboxGroupExample; ``` 在上面的示例中,我们定义了一个项列表数组 `options`,每个项都包含一个 `key` 值和一个显示的 `label`。然后,我们使用 `useState` 钩子来创建了三个状态变量:`checkedList` 用于保存中的框值,`indeterminate` 用于控制全框的中间状态,`checkAll` 用于控制全框的中状态。 我们还定义了两个处理函数:`handleCheckboxChange` 处理单个框的中,`handleCheckAllChange` 处理全框的中。在 `handleCheckboxChange` 中,我们更新了中的框值,并根据中的数量来更新全框的状态。在 `handleCheckAllChange` 中,我们根据全框的中状态来更新所有框的值,并更新全框的状态。 3. 最后,在你的页面或应用中使用这个组件即可。 ```tsx import React from 'react'; import CheckboxGroupExample from './CheckboxGroupExample'; const App: React.FC = () => { return ( <div> <CheckboxGroupExample /> </div> ); }; export default App; ``` 在上面的示例中,我们在主应用组件中使用 `CheckboxGroupExample` 组件。 这样就创建了一个带有 key 值的多框组,并实现了全功能。你可以根据实际需求调整项列表和样式。 希望这能帮到你!如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值