帆软实现一个单选按钮,可以统一设置其他单选按钮的选择状态

比如,选中单选按钮的一个选项,其他单选按钮的相同选项也被选中;取消选择,其他的也被取消选择
在普通报表中选中最上方的单选按钮的框进行组件设置,点击事件,点击添加事件,选中状态改变。
在这里插入图片描述
里面的js如下:
var a = this.getValue();
var status = contentPane.getWidgetsByName(“status”);
if(status.length>0){
$.each(status,function(i,item){
var cell = item.options.location;
if(a.length0){
item.reset();
}
contentPane.setCellValue(cell,null,a);
})
}else{
contentPane.setCellValue(“B2”,null,a);
if(a.length
0){
contentPane.getWidgetByName(“status”).reset();
}
}

可以实现该状态了。

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
好的,以下是一个简单的实现,你可以根据自己的需求进行修改和优化: ```html <!DOCTYPE html> <html> <head> <title>单选按钮增删示例</title> </head> <body> <label> <input type="radio" name="options" value="option1" checked="checked">选项1 </label><br> <label> <input type="radio" name="options" value="option2">选项2 </label><br> <label> <input type="radio" name="options" value="option3">选项3 </label><br><br> <div id="options-container"> <!-- 右侧选项容器 --> </div> <script> const optionsContainer = document.getElementById('options-container'); // 初始化选项1的右侧选项 addOption('option1'); // 监听单选按钮的变化 document.querySelectorAll('input[name="options"]').forEach((radio) => { radio.addEventListener('change', (event) => { // 清空右侧选项容器 optionsContainer.innerHTML = ''; // 根据选中的单选按钮值添加对应的右侧选项 addOption(event.target.value); }); }); function addOption(value) { switch(value) { case 'option1': // 选项1的右侧选项 optionsContainer.innerHTML = ` <label> <input type="checkbox" name="options1" value="option1-1">选项1-1 </label><br> <label> <input type="checkbox" name="options1" value="option1-2">选项1-2 </label><br> <label> <input type="checkbox" name="options1" value="option1-3">选项1-3 </label><br> `; break; case 'option2': // 选项2的右侧选项 optionsContainer.innerHTML = ` <label> <input type="checkbox" name="options2" value="option2-1">选项2-1 </label><br> <label> <input type="checkbox" name="options2" value="option2-2">选项2-2 </label><br> `; break; case 'option3': // 选项3的右侧选项 optionsContainer.innerHTML = ` <label> <input type="checkbox" name="options3" value="option3-1">选项3-1 </label><br> <label> <input type="checkbox" name="options3" value="option3-2">选项3-2 </label><br> <label> <input type="checkbox" name="options3" value="option3-3">选项3-3 </label><br> <label> <input type="checkbox" name="options3" value="option3-4">选项3-4 </label><br> `; break; } } </script> </body> </html> ``` 以上代码中,我们首先在页面中创建了三个单选按钮,每个单选按钮对应一个值。然后我们在页面中创建了一个空的容器 `options-container`,用于展示右侧的选项。 接下来,我们监听了单选按钮的变化事件,当单选按钮的值发生变化时,我们清空右侧选项容器,根据选中的单选按钮值添加对应的右侧选项。 最后,我们定义了一个 `addOption` 函数,根据传入的值添加对应的选项到右侧选项容器中。在这个函数中,我们使用了 `switch` 语句来根据传入的值判断应该添加哪些选项。你可以根据你自己的需求修改这个函数,添加你想要的选项。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值