尧图网站建设 
编程语言语言运行时编译器前端【免费下载链接】brythonBrython (Browser Python) is an implementation of Python 3 running in the browser项目地址https://gitcode.com/gh_mirrors/br/brython点击查看免费下载导读本文基于 Brython 官方文档库www/doc/es/cookbook/select_checkbox.md的实战示例系统讲解如何在浏览器端用 Python 管理select下拉框与input typecheckbox复选框的选择状态。你将掌握OPTION.selected与checkbox.checked两个布尔属性的读写方式、sel.options与sel.selectedIndex的取值技巧以及如何用事件绑定实现复选框 ↔ 下拉框的双向同步并深入理解browser.html模块在 brython.js 中的底层实现机制。问题场景需要联动管理的表单控件在表单开发中经常遇到两类需要程序化控制的选择控件SELECT元素由多个OPTION子元素组成支持单选默认或多选multiple属性Checkbox 复选框即INPUT元素且typecheckbox每个复选框独立表示一个布尔状态。典型的联动需求是一组复选框代表多个可选值一个多选下拉框也代表同一组可选值二者需要保持状态一致——勾选某个复选框时下拉框中对应选项被选中反过来改变下拉框的选择时复选框自动更新。原文档正是围绕这个场景展开下面先厘清两个核心属性的读写语义再给出完整可运行的示例。核心概念selected与checked两个布尔属性1.OPTION.selected下拉框选项的选中状态SELECT元素由OPTION元素组成每个OPTION拥有布尔属性selected读取判断该选项当前是否被选中返回True/False写入赋值为True或False即可选中或取消选中该选项。from browser import document, html sel html.SELECT(multipleTrue) sel html.OPTION(one) # 索引 0 sel html.OPTION(two) # 索引 1 sel.options[1].selected True # 选中 two print(sel.options[0].selected) # False2.checkbox.checked复选框的勾选状态CheckboxINPUT typecheckbox拥有布尔属性checked用法与selected完全对称读取判断复选框是否被勾选写入赋值True勾选赋值False取消勾选。chbox html.INPUT(Typecheckbox, valuetwo) chbox.checked True # 勾选 print(chbox.checked) # True这里Typecheckbox之所以能正确映射为 HTML 的type属性得益于browser.html模块内置的attribute_mapper机制——在 brython.js 中定义如下html.attribute_mapper function(attr){ return attr.replace(/_/g, -) }所有标签类的构造函数在设置关键字参数时都会先经过该映射把下划线风格的 Python 参数名转换为连字符风格的 HTML 属性名详见下文源码原理一节。完整示例复选框与多选下拉框的双向联动原文档给出了一段可直接运行的exec_on_load示例实现了两种控件状态的实时同步。下面逐段拆解并补充详细注释。from browser import document, html, alert def update_select(ev): # 用户点击复选框时触发根据复选框状态更新 SELECT 中对应选项 # ev.target 是被点击的复选框元素 rank choices.index(ev.target.value) # 由 value 反查选项索引 sel.options[rank].selected ev.target.checked # 同步选中状态 def show_selected(ev): # 弹窗展示当前所有被选中的选项值 alert([option.value for option in sel if option.selected]) def update_checkboxes(ev): # 用户改动 SELECT 时触发根据选中项反查并更新所有复选框 selected [option.value for option in sel if option.selected] for elt in document.get(selectorinput[typecheckbox]): elt.checked elt.value in selected # 逐个同步勾选状态 choices [one, two, three, four, five] sel html.SELECT(size5, multipleTrue) # 创建多选下拉框可见 5 行 for item in choices: sel html.OPTION(item) # 用 操作符追加选项 sel.bind(change, update_checkboxes) # 监听下拉框变更 for item in choices: chbox html.INPUT(Typecheckbox, valueitem) # 创建复选框value 与选项一致 chbox.bind(click, update_select) # 监听复选框点击 document[panel] item chbox # 文本标签 复选框追加到面板 document[panel] sel b_show html.BUTTON(show selected) b_show.bind(click, show_selected) document[panel] b_showdiv idpanel/div示例逻辑拆解环节代码作用创建多选下拉框html.SELECT(size5, multipleTrue)size5让下拉框以列表框形式显示 5 行multipleTrue开启多选追加选项sel html.OPTION(item)Brython 的操作符等价于appendChild把OPTION挂到SELECT下事件绑定sel.bind(change, update_checkboxes)change事件在用户改动选择后触发同步复选框事件绑定chbox.bind(click, update_select)点击复选框立即同步下拉框对应选项追加到页面document[panel] item chboxdocument[panel]按 id 取元素字符串与元素相加会生成文本节点后再追加批量查询document.get(selectorinput[typecheckbox])按 CSS 选择器返回符合条件的元素列表用于批量同步关键 API 要点sel.options原生 DOM 的HTMLSelectElement.options集合可直接按下标访问如sel.options[rank]sel.selectedIndex对于单选SELECT未设置multiple该属性给出当前选中选项的索引读取代码为sel.selectedIndex写入代码为sel.selectedIndex rank迭代选项for option in sel会遍历SELECT的所有OPTION子元素配合option.selected即可过滤出选中项取值option.value返回选项的value属性由于构造OPTION(item)时未显式指定 value此时value与选项文本一致。源码原理browser.html标签类与属性映射1. 标签类由模板函数动态生成在 brython.js 中browser.html模块通过makeTagClass(tagName)统一为每个 HTML 标签生成 Python 类function makeTagClass(tagName){ var cls $B.make_builtin_class(tagName, [$B.DOMNode]) ... cls.tp_new function(cls){ var res document.createElement(tagName) // 底层创建原生 DOM 节点 ... } ... }tp_new直接调用document.createElement(tagName)因此html.SELECT、html.OPTION、html.INPUT创建的都是标准原生 DOM 元素selected、checked、options等属性与浏览器原生行为完全一致。2. 标签清单与属性构造逻辑SELECT、OPTION、INPUT均出现在模块内置的标签清单brython.js中因此可以直接以html.SELECT(...)、html.OPTION(...)、html.INPUT(...)形式调用。类构造函数tp_init对传入的关键字参数逐一处理brython.js参数名以on开头如onclick→ 当作事件处理器绑定参数名为style→ 写入内联样式其余参数 → 先经attribute_mapper将下划线替换为连字符再调用setAttribute写入。这解释了示例中的写法Typecheckbox→typecheckboxmultipleTrue→multiplesize5→size5。由于attribute_mapper只做字符串替换在 Brython 的 HTML 标签类中下划线命名与原生属性名是同一回事例如class_、max_length等属性均可按此规则书写。3. 仓库内的真实调用佐证www/src/Lib/site-packages/header.py文档页头语言切换用sel.options[sel.selectedIndex].value读取单选下拉框当前值与文档中selectedIndex的说明相互印证www/src/Lib/site-packages/ui/dialog.py对话框组件通过self._div_shell.get(selectorSELECT)[0].selectedIndex获取内部下拉框的选中索引展示了document.get(selector...)的组件内用法www/src/Lib/interpreter.py交互式解释器用ev.target.selectedIndex在栈帧列表间切换说明SELECT的change事件目标可直接携带选中索引www/src/Lib/test/sgml_input.html测试页面中z1.options[z1.selectedIndex].value的用法验证了options集合与selectedIndex的组合读取方式。实战延伸单选下拉框与动态选项构建场景一单选下拉框读取当前值不带multiple的SELECT是单选模式读取选中项最简洁的方式是selectedIndexfrom browser import document, html sel html.SELECT() for name in [python, javascript, ruby]: sel html.OPTION(name, valuename) def on_change(ev): idx sel.selectedIndex # 选中项索引 print(sel.options[idx].value) # 选中项值 sel.bind(change, on_change)场景二批量构建选项的两种方式除逐条sel html.OPTION(...)外还可以一次传入可迭代对象。tp_init支持把列表/元组参数逐个挂载为子元素brython.jsoptions [one, two, three] sel2 html.SELECT(options) # 直接把列表作为首个位置参数需要控制每个选项的value与显示文本不同时显式指定value即可for code, label in [(zh, 中文), (en, English)]: sel html.OPTION(label, valuecode)场景三从change事件中取选中索引单选下拉框的change事件对象同样携带target.selectedIndex这在仓库的交互式解释器中已有实践www/src/Lib/interpreter.pydef on_change(ev): rank ev.target.selectedIndex # 事件目标即 SELECT 元素常见问题与注意事项multipleTrue的传参写法必须写成multipleTrue而不是multiplemultiple。构造器在参数值为False时跳过属性设置brython.js为True时写入属性布尔True会被转换为原生布尔值传入setAttribute。OPTION的value与文本html.OPTION(item)只有一个参数时该参数作为元素文本内容此时option.value默认等于文本需要区分展示文本与提交值时务必显式传value。字符串与元素相加document[panel] item chbox中item是普通字符串Brython 会将其包装为文本节点再追加因此可以一行完成标签 控件的插入。for option in sel的遍历范围它遍历的是SELECT的所有OPTION子元素若结构中出现OPTGROUP分组需要先展开分组再取选项。document.get(selector...)返回的是列表批量更新复选框时逐项赋值即可document[panel]则按 id 取单个元素二者不可混用。小结通过本文你已掌握 Brython 中管理SELECT与 checkbox 的完整方法用OPTION.selected与checkbox.checked读写布尔状态用sel.options与sel.selectedIndex读取选中项用bind(change/click, ...)实现双向联动并能理解browser.html标签类在 brython.js 中的动态生成与下划线属性映射机制。这套模式可直接迁移到表单校验、多选筛选、设置面板等常见页面交互中。赞分享编程语言语言运行时编译器前端【免费下载链接】brythonBrython (Browser Python) is an implementation of Python 3 running in the browser项目地址https://gitcode.com/gh_mirrors/br/brython点击查看免费下载相关推荐Brython 表单交互实战SELECT 下拉框与复选框Checkbox的选中状态双向联动Brython 表单交互实战SELECT 下拉框与复选框Checkbox的选中状态双向联动 本篇技术指南以 Brython 官方 Cookbook 中的编程语言语言运行时编译器前端AntdUI选择器Select与SelectMultiple的下拉选择实现AntdUI选择器Select与SelectMultiple的下拉选择实现 概述 在WinForm应用开发中下拉选择器是用户界面中不可或缺的组件。AntdUUI组件桌面应用re2g-reranker-nq源码解析深入理解IBM的Retrieve-Rerank-Generate框架re2g reranker nq源码解析深入理解IBM的Retrieve Rerank Generate框架 re2g reranker nq 是IBM上一篇Cloudflare REST API 集成完全指南认证、SDK 配置、限流与实战模式cloudflare-deploy Skill下一篇使用 FastAPI 部署 DeepSeek-R1-Distill-Qwen-7B从环境配置到 curl / requests 接口调用的完整实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Brython 实战：SELECT 下拉框与 Checkbox 复选框的选择管理与双向联动
编程语言语言运行时编译器前端【免费下载链接】brythonBrython (Browser Python) is an implementation of Python 3 running in the browser项目地址https://gitcode.com/gh_mirrors/br/brython点击查看免费下载导读本文基于 Brython 官方文档库www/doc/es/cookbook/select_checkbox.md的实战示例系统讲解如何在浏览器端用 Python 管理select下拉框与input typecheckbox复选框的选择状态。你将掌握OPTION.selected与checkbox.checked两个布尔属性的读写方式、sel.options与sel.selectedIndex的取值技巧以及如何用事件绑定实现复选框 ↔ 下拉框的双向同步并深入理解browser.html模块在 brython.js 中的底层实现机制。问题场景需要联动管理的表单控件在表单开发中经常遇到两类需要程序化控制的选择控件SELECT元素由多个OPTION子元素组成支持单选默认或多选multiple属性Checkbox 复选框即INPUT元素且typecheckbox每个复选框独立表示一个布尔状态。典型的联动需求是一组复选框代表多个可选值一个多选下拉框也代表同一组可选值二者需要保持状态一致——勾选某个复选框时下拉框中对应选项被选中反过来改变下拉框的选择时复选框自动更新。原文档正是围绕这个场景展开下面先厘清两个核心属性的读写语义再给出完整可运行的示例。核心概念selected与checked两个布尔属性1.OPTION.selected下拉框选项的选中状态SELECT元素由OPTION元素组成每个OPTION拥有布尔属性selected读取判断该选项当前是否被选中返回True/False写入赋值为True或False即可选中或取消选中该选项。from browser import document, html sel html.SELECT(multipleTrue) sel html.OPTION(one) # 索引 0 sel html.OPTION(two) # 索引 1 sel.options[1].selected True # 选中 two print(sel.options[0].selected) # False2.checkbox.checked复选框的勾选状态CheckboxINPUT typecheckbox拥有布尔属性checked用法与selected完全对称读取判断复选框是否被勾选写入赋值True勾选赋值False取消勾选。chbox html.INPUT(Typecheckbox, valuetwo) chbox.checked True # 勾选 print(chbox.checked) # True这里Typecheckbox之所以能正确映射为 HTML 的type属性得益于browser.html模块内置的attribute_mapper机制——在 brython.js 中定义如下html.attribute_mapper function(attr){ return attr.replace(/_/g, -) }所有标签类的构造函数在设置关键字参数时都会先经过该映射把下划线风格的 Python 参数名转换为连字符风格的 HTML 属性名详见下文源码原理一节。完整示例复选框与多选下拉框的双向联动原文档给出了一段可直接运行的exec_on_load示例实现了两种控件状态的实时同步。下面逐段拆解并补充详细注释。from browser import document, html, alert def update_select(ev): # 用户点击复选框时触发根据复选框状态更新 SELECT 中对应选项 # ev.target 是被点击的复选框元素 rank choices.index(ev.target.value) # 由 value 反查选项索引 sel.options[rank].selected ev.target.checked # 同步选中状态 def show_selected(ev): # 弹窗展示当前所有被选中的选项值 alert([option.value for option in sel if option.selected]) def update_checkboxes(ev): # 用户改动 SELECT 时触发根据选中项反查并更新所有复选框 selected [option.value for option in sel if option.selected] for elt in document.get(selectorinput[typecheckbox]): elt.checked elt.value in selected # 逐个同步勾选状态 choices [one, two, three, four, five] sel html.SELECT(size5, multipleTrue) # 创建多选下拉框可见 5 行 for item in choices: sel html.OPTION(item) # 用 操作符追加选项 sel.bind(change, update_checkboxes) # 监听下拉框变更 for item in choices: chbox html.INPUT(Typecheckbox, valueitem) # 创建复选框value 与选项一致 chbox.bind(click, update_select) # 监听复选框点击 document[panel] item chbox # 文本标签 复选框追加到面板 document[panel] sel b_show html.BUTTON(show selected) b_show.bind(click, show_selected) document[panel] b_showdiv idpanel/div示例逻辑拆解环节代码作用创建多选下拉框html.SELECT(size5, multipleTrue)size5让下拉框以列表框形式显示 5 行multipleTrue开启多选追加选项sel html.OPTION(item)Brython 的操作符等价于appendChild把OPTION挂到SELECT下事件绑定sel.bind(change, update_checkboxes)change事件在用户改动选择后触发同步复选框事件绑定chbox.bind(click, update_select)点击复选框立即同步下拉框对应选项追加到页面document[panel] item chboxdocument[panel]按 id 取元素字符串与元素相加会生成文本节点后再追加批量查询document.get(selectorinput[typecheckbox])按 CSS 选择器返回符合条件的元素列表用于批量同步关键 API 要点sel.options原生 DOM 的HTMLSelectElement.options集合可直接按下标访问如sel.options[rank]sel.selectedIndex对于单选SELECT未设置multiple该属性给出当前选中选项的索引读取代码为sel.selectedIndex写入代码为sel.selectedIndex rank迭代选项for option in sel会遍历SELECT的所有OPTION子元素配合option.selected即可过滤出选中项取值option.value返回选项的value属性由于构造OPTION(item)时未显式指定 value此时value与选项文本一致。源码原理browser.html标签类与属性映射1. 标签类由模板函数动态生成在 brython.js 中browser.html模块通过makeTagClass(tagName)统一为每个 HTML 标签生成 Python 类function makeTagClass(tagName){ var cls $B.make_builtin_class(tagName, [$B.DOMNode]) ... cls.tp_new function(cls){ var res document.createElement(tagName) // 底层创建原生 DOM 节点 ... } ... }tp_new直接调用document.createElement(tagName)因此html.SELECT、html.OPTION、html.INPUT创建的都是标准原生 DOM 元素selected、checked、options等属性与浏览器原生行为完全一致。2. 标签清单与属性构造逻辑SELECT、OPTION、INPUT均出现在模块内置的标签清单brython.js中因此可以直接以html.SELECT(...)、html.OPTION(...)、html.INPUT(...)形式调用。类构造函数tp_init对传入的关键字参数逐一处理brython.js参数名以on开头如onclick→ 当作事件处理器绑定参数名为style→ 写入内联样式其余参数 → 先经attribute_mapper将下划线替换为连字符再调用setAttribute写入。这解释了示例中的写法Typecheckbox→typecheckboxmultipleTrue→multiplesize5→size5。由于attribute_mapper只做字符串替换在 Brython 的 HTML 标签类中下划线命名与原生属性名是同一回事例如class_、max_length等属性均可按此规则书写。3. 仓库内的真实调用佐证www/src/Lib/site-packages/header.py文档页头语言切换用sel.options[sel.selectedIndex].value读取单选下拉框当前值与文档中selectedIndex的说明相互印证www/src/Lib/site-packages/ui/dialog.py对话框组件通过self._div_shell.get(selectorSELECT)[0].selectedIndex获取内部下拉框的选中索引展示了document.get(selector...)的组件内用法www/src/Lib/interpreter.py交互式解释器用ev.target.selectedIndex在栈帧列表间切换说明SELECT的change事件目标可直接携带选中索引www/src/Lib/test/sgml_input.html测试页面中z1.options[z1.selectedIndex].value的用法验证了options集合与selectedIndex的组合读取方式。实战延伸单选下拉框与动态选项构建场景一单选下拉框读取当前值不带multiple的SELECT是单选模式读取选中项最简洁的方式是selectedIndexfrom browser import document, html sel html.SELECT() for name in [python, javascript, ruby]: sel html.OPTION(name, valuename) def on_change(ev): idx sel.selectedIndex # 选中项索引 print(sel.options[idx].value) # 选中项值 sel.bind(change, on_change)场景二批量构建选项的两种方式除逐条sel html.OPTION(...)外还可以一次传入可迭代对象。tp_init支持把列表/元组参数逐个挂载为子元素brython.jsoptions [one, two, three] sel2 html.SELECT(options) # 直接把列表作为首个位置参数需要控制每个选项的value与显示文本不同时显式指定value即可for code, label in [(zh, 中文), (en, English)]: sel html.OPTION(label, valuecode)场景三从change事件中取选中索引单选下拉框的change事件对象同样携带target.selectedIndex这在仓库的交互式解释器中已有实践www/src/Lib/interpreter.pydef on_change(ev): rank ev.target.selectedIndex # 事件目标即 SELECT 元素常见问题与注意事项multipleTrue的传参写法必须写成multipleTrue而不是multiplemultiple。构造器在参数值为False时跳过属性设置brython.js为True时写入属性布尔True会被转换为原生布尔值传入setAttribute。OPTION的value与文本html.OPTION(item)只有一个参数时该参数作为元素文本内容此时option.value默认等于文本需要区分展示文本与提交值时务必显式传value。字符串与元素相加document[panel] item chbox中item是普通字符串Brython 会将其包装为文本节点再追加因此可以一行完成标签 控件的插入。for option in sel的遍历范围它遍历的是SELECT的所有OPTION子元素若结构中出现OPTGROUP分组需要先展开分组再取选项。document.get(selector...)返回的是列表批量更新复选框时逐项赋值即可document[panel]则按 id 取单个元素二者不可混用。小结通过本文你已掌握 Brython 中管理SELECT与 checkbox 的完整方法用OPTION.selected与checkbox.checked读写布尔状态用sel.options与sel.selectedIndex读取选中项用bind(change/click, ...)实现双向联动并能理解browser.html标签类在 brython.js 中的动态生成与下划线属性映射机制。这套模式可直接迁移到表单校验、多选筛选、设置面板等常见页面交互中。赞分享编程语言语言运行时编译器前端【免费下载链接】brythonBrython (Browser Python) is an implementation of Python 3 running in the browser项目地址https://gitcode.com/gh_mirrors/br/brython点击查看免费下载相关推荐Brython 表单交互实战SELECT 下拉框与复选框Checkbox的选中状态双向联动Brython 表单交互实战SELECT 下拉框与复选框Checkbox的选中状态双向联动 本篇技术指南以 Brython 官方 Cookbook 中的编程语言语言运行时编译器前端AntdUI选择器Select与SelectMultiple的下拉选择实现AntdUI选择器Select与SelectMultiple的下拉选择实现 概述 在WinForm应用开发中下拉选择器是用户界面中不可或缺的组件。AntdUUI组件桌面应用re2g-reranker-nq源码解析深入理解IBM的Retrieve-Rerank-Generate框架re2g reranker nq源码解析深入理解IBM的Retrieve Rerank Generate框架 re2g reranker nq 是IBM上一篇Cloudflare REST API 集成完全指南认证、SDK 配置、限流与实战模式cloudflare-deploy Skill下一篇使用 FastAPI 部署 DeepSeek-R1-Distill-Qwen-7B从环境配置到 curl / requests 接口调用的完整实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考