radio-button 相关问题

单选按钮选中香草js时显示div

这里有点挣扎。我的事件侦听器仅检测到单选按钮的“已选中”更改，而不是“未选中”更改。注意：仅纯 javascript (vanillajs)，无 jQuery。 一点 JSFiddle

根据先前的组禁用单选按钮组

我有 2 组 2 个单选按钮。除非在第 1 组中选择“是”，否则应禁用第 2 组。但是，如果用户从“是”切换，则需要清除并禁用第二组

动态加载数据时，如何为 Angular 中的数组分配默认值？

我有一个名为“习惯”的数组。像这样 我将其显示在带有单选按钮的表格中（是，否）。 我有一个名为“习惯”的数组。像这样 我将其显示在带有单选按钮的表格中（是，否）。 <tr *ngFor="let habits of masterDate.data.habits; index as x"> <th class="tbl-border-right-bottom text-wrap" style="width: 50%"> {{ habits.name }} <div hidden="true"> <input type="text" formControlName="habitsSufferedMainId{{ x }}" /> </div> </th> <td class="tbl-border-right-bottom"> <div class="col-md-6"> <div class="form-group d-flex justify-content-around pr-2"> <div class="custom-control custom-radio"> <input type="radio" class="custom-control-input" id="habitsSufferedMain{{ x }}" value="1" name="habitsSufferedMain{{ x }}" formControlName="habitsSufferedMain{{ x }}" /> <label class="custom-control-label" for="habitsSufferedMain{{ x }}">Yes</label> </div> <div class="custom-control custom-radio"> <input type="radio" class="custom-control-input" id="isMainHabitNo{{ x }}" value="0" name="habitsSufferedMain{{ x }}" formControlName="habitsSufferedMain{{ x }}" [checked]="true" /> <label class="custom-control-label" for="isMainHabitNo{{ x }}">No</label> </div> </div> </div> <div class="form-group"> <textarea placeholder="If 'Yes' please give details" class="form-control form-control-sm" rows="2" formControlName="habitsSufferedMainReason{{ x }}"></textarea> </div> </td> </tr> 如何将默认值设置为“否”。 根据点击是或否，将值放入数组中。 首先创建一个地图来存储结果 const results = new Map<number, boolean>(); 您可以使用 FormControl() 设置复选框的默认值 const habitOne = new FormControl(false); results['habitOne'].set(false); 然后监听 valueChanges oberbable 将结果存储在 Map 中 habitOne.valueChanges.subscribe(value => { results.set('habitOne', value) }) 当然，您可以使用 FormBuilder 通过循环来完成此操作。 （但请记住以反应形式包装所有输入<form [formGroup]=form> form: FormGroup; constructor(private fb: FormBuilder) { this.form = this.fb.group( this.habits.reduce((controls, habit, index) => { this.results.set(index, false) return { ...controls, [`habit${index}`]: new FormControl(false) } }, {})); Object.keys(this.form.controls).forEach((control, index) => { control.valueChanges.subscribe(value => { this.results.set(index, value == true) }) } }

防止单选按钮下方的文本换行

我能描述我想要的最好的方式就是用这张图片： 如何使文本与顶部文本对齐，而不是与单选按钮对齐？ 相关CSS如下： .basic-灰色{ 宽...

如何取消选中单选按钮

我有两种表单，一种带有单选按钮，用户必须选择该按钮才能编辑。 [表格名称=“A”] [输入类型=“无线电”名称=“BookItem”值=“1”/] [输入类型=“无线电”名称=“” 我有两种表单，一种带有单选按钮，用户必须选择该按钮才能编辑。 [form name="A"] <li>[input type="radio" name="BookItem" value="1" /]</li> <li>[input type="radio" name="BookItem" value="2" /]</li> <li>[input type="radio" name="BookItem" value="3" /]</li> [form]<p> 从表单 (A) 中选择“BookItem”后，我调用 $("#EditFormWrapper").load("callEditData.cfm? ID="+ID); 函数来加载第二个表单 (B) <div id="EditFormWrapper"><div></p> <!---// begin dynamic form generated by external file callEditData.cfm //---> [form id="editForm" name="B"] <ul class="hourswrapper"> <li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="AM2Hrs1" /> 2 Hours AM</li> <li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="PM2Hrs1" /> 2 Hours PM</li> <li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="AM2Hrs2" /> 2 Hours AM</li> <li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="PM2Hrs2" /> 2 Hours PM</li> </ul> [input type="image" src="images/submit-btn.gif" id="addBTN" name="addBTN" class="buttons" alt="SubmitRrequest" /] [input type="image" src="images/cancel-btn.gif" id="editBTNcancel" name="editBTNcancel" class="buttons" alt="Cancel Request" /] [/form] <!---// end dynamic form from external file //---> 当用户单击表单（B）中的取消按钮（editBTNcancel）时，我想取消选中表单（A）上的单选按钮。 这是我的脚本： $("#editBTNcancel").live("click", function(event){ event.preventDefault(); $("#EditFormWrapper").slideUp("fast").empty(); //$('.TOR2Hours').removeAttr('checked'); $('.TOR2Hours').attr('checked', false); }); 我希望我清楚地说明我的问题，任何建议将不胜感激！ 您可以像这样访问表格... var exampleForm = document.forms['form_name']; 然后循环遍历表格 for( var i=0; i<exampleForm.length; i++ ){ alert( exampleForm[i].type ); } 你可以像这样测试检查... if( exampleForm[i].checked ) 要取消选择选中的单选按钮，请尝试... exampleForm[i].checked=false; 最终的代码看起来像这样...... var exampleForm = document.forms['form_name']; for( var i=0; i<exampleForm.length; i++ ){ if( exampleForm[i].type ) == 'radio' && exampleForm[i].checked == true ){ exampleForm[i].checked = false; } } 我不确定你到底想要什么，但你可以尝试使用重置输入。 <input type='reset' /> 由于这几乎是最简单的 DOM 任务并且适用于每个可编写脚本的浏览器，因此我建议不要使用 jQuery 方法： $(".TOR2Hours")[0].checked = false; 我想到的另一件事是你的选择器是否正确。您的意思是按类选择一组元素还是应该使用 ID 选择器？ 您的选择器根本就是错误的。 如果您想取消选中第一个表单中的单选按钮，您应该使用 $('input[name="BookItem"]') 而不是 $('.TOR2Hours') : $("#editBTNcancel").on("click", function(event){ $("#EditFormWrapper").slideUp("fast").empty(); $('input[name="BookItem"]').attr('checked', false); }); 至于使用哪种方法取消选中单选按钮，以下 3 种方法应该都有效： $('input[name="BookItem"]').attr('checked', false); $('input[name="BookItem"]').removeAttr('checked'); $('input[name="BookItem"]').prop('checked', false); 但是，请查看关于 jQuery prop() 的 jQuery 文档，了解 attr() 和 prop() 之间的区别。 我刚刚发现了这个问题的一个很好的解决方案。 假设您有两个无线电需要能够选中/取消选中，请实现此代码并更改必要的内容： var gift_click = 0; function HandleGiftClick() { if (document.getElementById('LeftPanelContent_giftDeed2').checked == true) { gift_click++; memorial_click = 0; } if (gift_click % 2 == 0) {document.getElementById('LeftPanelContent_giftDeed2').checked = false; } } var memorial_click = 0; function HandleMemorialClick() { if (document.getElementById('LeftPanelContent_memorialDeed2').checked == true) { memorial_click++; gift_click = 0; } if (memorial_click % 2 == 0) { document.getElementById('LeftPanelContent_memorialDeed2').checked = false; } } ：）不客气 我用这种方式解决了你在ASP.net中的问题，检查这个.. radioButton.InputAttributes["show"] = "false"; string clickJs = " if(this.show =='true'){this.show ='false'; this.checked = false;}else{this.show='true'; this.checked = true;};"; radioButton.Attributes["onClick"] = clickJs; 在asp.net中，可以使用这种方式添加属性。您还可以手动向radioButton添加属性，并执行函数（clickJs）来更改ckecked属性!!! Array.prototype.forEach.call(auswahl_dachaufbau, function(rd) { // Event-Listener für Radio-Buttons rd.addEventListener("mousedown", function(e) { let id = e.target.id; if (this.checked) { reset_dachaufbau(id); // Das Setzen der onclick-function auf diese Weise ist dafür da, damit man // Radio-Buttons auch unchecked machen kann ohne einen neuen Radio-Button auszuwählen // Seltsamerweise ist das nicht möglich ohne weiteres this.onclick = function() { this.checked = false; } } else { this.onclick = null; select_dachaufbau(id); } }); }); Funktioniert 沉浸式

我的两个单选按钮在相同的 HTML 代码下表现不同

在下面的代码中，当我单击男性文本（不是单选按钮）时，它会选择该选项，但是当我单击女性文本时，它会选择单选按钮。如何？请帮忙。 ` 在下面的代码中，当我单击男性文本（不是单选按钮）时，它会选择该选项，但是当我单击女性文本时，它会选择单选按钮。如何？请帮忙。 `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="action.php"> <lable for="id1"> <input type="radio" value="Male" name="Gender" id="id1">Male </lable> <label for="id2"> <input type="radio" value="Female" name="Gender" id="id2">Female </label> </form> </body> </html>` 我期望通过单击男性文本来选择男性单选按钮，但只有在单击男性单选按钮后才会选择它。 问题是两个单选按钮具有相同的名称属性。 <lable for="Male"> <input type="radio" value="Male" name="Male" id="id1">Male </lable> <label for="Female"> <input type="radio" value="Female" name="Female" id="id2">Female </label>

Next/React.js 中页面重新加载后，默认选定的单选按钮消失

通过路由器链接（从“next/link”作为链接导入）导航到页面时，默认选择工作正常。但是，当页面重新加载时，默认选择的选项会立即出现...

如何在 MUI 单选按钮中添加勾号图标而不是项目符号图标

我需要从'@mui/icons-material/CheckCircleSharp'添加CheckCircleSharpIcon而不是项目符号图标 {res?.map((radiooption, 索引) => ( <> 我需要从'@mui/icons-material/CheckCircleSharp'添加CheckCircleSharpIcon而不是项目符号图标 {res?.map((radiooption, index) => ( <> <RadioGroup aria-labelledby="demo-radio-buttons-group-label" name="radio-buttons-group" className={classes.radioGroup} value={value} onChange={handleChange} key={radiooption.secondaryRadioName} > <FormControlLabel className={classes.radioButton} value= {radiooption?.secondaryRadioName} control={<Radio />} label={<span dangerouslySetInnerHTML={{ __html: radiooption?.secondaryRadioName }}/>} /> </RadioGroup> </> ))} 根据 API，您可以利用其 checkedIcon 属性，因此 Radio 组件应该如下所示 <Radio checkedIcon={<CheckCircleIcon />} /> 链接到checkedIcon道具信息：https://mui.com/material-ui/api/radio/#Radio-prop-checkedIcon CodeSandbox 工作演示：https://codesandbox.io/s/bold-cloud-xhylt5?file=/Demo.tsx:718-761

多个单选按钮组均可在同一次单击上切换

在我的角度应用程序中，我只是尝试创建多个单选按钮组。一个组看起来像这样： 在我的角度应用程序中，我只是尝试创建多个单选按钮组。一组看起来像这样： <input [formControl]="ctrlx" type="radio" [value]="true" id="idx" autocomplete="off"/> <label for="idx">Yes</label> <input [formControl]="ctrlx" type="radio" [value]="false" id="idy" autocomplete="off" /> <label for="idy">No</label> 演示 奇怪的是，正如您在演示中看到的那样，当您单击其中一个收音机时，其他所有收音机也会发生变化。不知何故，我的无线电组已连接。有什么建议我在这里做错了吗？ 只需给每个组一个唯一的名称 <div> <input [formControl]="ctrlx" type="radio" [value]="true" id="idx" name="a" autocomplete="off"/> <label for="idx">Yes</label> <input [formControl]="ctrlx" type="radio" [value]="false" id="idy" name="a" autocomplete="off" /> <label for="idy">No</label> </div>

将状态设置为单选按钮标签的值

我有一个表单中的单选按钮列表。 所需品种（如果有） ... 我有一个表单中的单选按钮列表。 <h6>Desired breed (if any)</h6> <div className="radio container-fluid"> <label> <input type="radio" className="checkbox" name="Breed" onClick={(e) => setBreed(e.target.value)} /> <p className="checkbox">Goldendoodle</p> </label> <label> <input type="radio" className="checkbox" name="Breed" onClick={(e) => setBreed(e.target.value)} /> <p className="checkbox">English Goldendoodle</p> </label> <label> <input type="radio" className="checkbox" name="Breed" onClick={(e) => setBreed(e.target.value)} /> <p className="checkbox">Labradoodle</p> </label> <label> <input type="radio" className="checkbox" name="Breed" onClick={(e) => setBreed(e.target.value)} /> <p className="checkbox">Poodle</p> </label> <label> <input type="radio" className="checkbox" name="Breed" onClick={(e) => setBreed(e.target.value)} /> <p className="checkbox">Other</p> </label> <label> <input type="radio" className="checkbox" name="Breed" onClick={(e) => setBreed(e.target.value)} /> <p className="checkbox">No preference</p> </label> </div> </label> </div> 我想做的是将 Breed 变量设置为所选复选框的值。问题是我得到的值是 on，而不是标签上的内容。 我无法更改单选按钮的名称属性，因为我一次只需要选择一个。 （我也愿意接受其他方法来实现这一目标）。 尝试像这样改变onClick： onClick={(e) => setBreed(e.target.nextSibling.textContent)} <input type="radio" />元素没有任何值，这就是使用"on"的原因。当为每个 value 提供 <input /> 属性时，您可以看到状态正确更新。 这还允许您将实际值与显示的标签分开。例如，假设您的界面有多种语言版本。在这种情况下，您将为每种语言使用不同的标签，但值将保持不变。 function App() { const [breed, setBreed] = React.useState(null); console.log(breed); return ( <div> <h6>Desired breed (if any)</h6> <div className="radio container-fluid"> <label> <input type="radio" className="checkbox" name="Breed" value="Goldendoodle" onClick={(e) => setBreed(e.target.value)} /> <p className="checkbox">Goldendoodle</p> </label> <label> <input type="radio" className="checkbox" name="Breed" value="English Goldendoodle" onClick={(e) => setBreed(e.target.value)} /> <p className="checkbox">English Goldendoodle</p> </label> <label> <input type="radio" className="checkbox" name="Breed" value="Labradoodle" onClick={(e) => setBreed(e.target.value)} /> <p className="checkbox">Labradoodle</p> </label> <label> <input type="radio" className="checkbox" name="Breed" value="Poodle" onClick={(e) => setBreed(e.target.value)} /> <p className="checkbox">Poodle</p> </label> <label> <input type="radio" className="checkbox" name="Breed" value="Other" onClick={(e) => setBreed(e.target.value)} /> <p className="checkbox">Other</p> </label> <label> <input type="radio" className="checkbox" name="Breed" value="No preference" onClick={(e) => setBreed(e.target.value)} /> <p className="checkbox">No preference</p> </label> </div> </div> ); } ReactDOM.render(<App />, document.querySelector("#root")); <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> <div id="root"></div>

我无法在输入类型上动态分配值：radio / Angular

我很迷失，我正在尝试根据网址动态构建表单的模板，但由于某种原因我无法在单选类型输入上设置属性值。 表单蛋糕 html 我很迷失，我正在尝试根据网址动态构建表单的模板，但由于某种原因我无法在单选类型输入上设置属性值。 form-cake html <form [formGroup]="formCake" (ngSubmit)="onSubmit()"> <ng-container *ngFor="let template of formTemplate"> <label for="{{template.id}}">{{template.label}}: </label> <input id="{{template.id}}" type="{{template.type}}" [name]="template.name" [formControlName]="template.name" [attr.value]="(template.type === 'radio') ? template.value: null"> </ng-container> 形成蛋糕组件 ngOnInit(): void { this.formCake = this.formService.formControllerSetup(); this.formTemplate = this.formService.formHtmlSetup(); 表单服务 formControllerSetup(): FormGroup { return this.fb.group({ name: ['', Validators.required], description: ['', [Validators.required]], image: ['', Validators.required], price: [+'', Validators.required], cakeType: [null, Validators.required], allergies: this.fb.group({ cereal: [false], nuts: [false], eggs: [false], milk: [false], soy: [false], peanuts: [false], sulfite: [false], // ... Ajoute d'autres allergies ici }) }); } formHtmlSetup() { let fields!: any[]; return fields = [ { type: 'text',id: 'name',name: 'name', label: 'Name', validation: { required: true } }, { type: 'text',id: 'description', name: 'description', label: 'Description', validation: { required: true } }, { type: 'text',id: 'image', name: 'image', label: 'Image', validation: { required: true } }, { type: 'number',id: 'price', name: 'price', label: 'Price', validation: { required: true } }, { type: 'radio',id: 'pm', name: 'cakeType', label: 'Pm', validation: { required: true } }, { type: 'radio',id: 'pie', name: 'cakeType', label: 'Pie', validation: { required: true } }, ] } 我正在服务内构建模板，将其注入到组件内，然后在 formTemplate 上循环以获取 HTML 中的所有字段。 <input id="{{template.id}}" type="{{template.type}}" [name]="template.name" [formControlName]="template.name" [attr.value]="template.id"> 我确实尝试过 [value]="template.id"/ value="{{template.id}}" 但只有这个版本可以工作[attr.value]="template.id"。知道原来有一个三元 [attr.value]="(template.type === 'radio') ? template.id: null" 过滤其他字段。 但是像这样，我可以看到其他输入正在更新，但无线电类型没有更新。 也许我累了，但不知道该往哪里看。 恐怕您无法使用 FormControlName 将类型单选和值动态分配给输入。我认为你唯一能做到的就是使用两个 *ngIf （一个用于输入类型无线电，另一个用于其余） <form [formGroup]="formCake"> <ng-container *ngFor="let template of formTemplate"> <label for="{{template.id}}">{{template.label}}: </label> <input *ngIf="template.type==='radio'" [id]="template.id" type="radio" [name]="'_'+template.name" [value]="template.type == 'radio' ? template.id: null" [formControlName]="template.name" /> <input *ngIf="template.type!=='radio'" id="{{template.id}}" [type]="template.type" [name]="'_'+template.name" [value]="template.type == 'radio' ? template.id: null" [formControlName]="template.name" /> </ng-container> </form>

在jsp中获取表格动态选定行的值

我在jsp中有一个页面，其中我在表中动态显示数据库中的记录，并生成动态行。每行都有一个单选按钮，以便用户可以选择...

如何在漂亮的单选按钮的标签中进行换行？

我正在 R Studio 中构建一个带有闪亮的网络平台。我被困在单选按钮选择中设置换行符，因为我需要将长选择名称与方法名称放在一起。这是示例代码。

获取 tkinter 单选按钮所有关联值的便捷方法？

有没有一种方便的（内在的）方法来访问单选按钮（tkinter，python）的属性？ 我不仅在 Stackoverflow 上认真搜索，还在互联网上进行了认真的搜索，有很多类似的问题，但答案...

在 Streamlit 的复选框中选择多个选项

我是 Streamlit 的新手。我想进行多项选择用户输入（复选框）。但我想从 4 个选项中最多选择 3 个。 我尝试过多选的下拉功能。

引导单选按钮组未正确显示

我不知道为什么，但单选按钮组单独显示按钮/标签和单选按钮，与引导网站上的示例不同 代码只是从引导程序复制粘贴的（...

Bootstrap 5 单选切换按钮 btn-check 与 btn-sm 类

我试图将 btn-check 类与 btn-sm 一起使用来获得更小的按钮，但它忽略了小类。我错过了什么或者有其他方法可以让按钮变小吗？ 我正在尝试使用 btn-check 类和 btn-sm 来获得更小的按钮，但它忽略了小类。我错过了什么还是有其他方法可以让按钮变小？ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <div class="row g-2 mx-2 my-2"> <div class="btn-group col-6" role="group"> <input type="radio" class="btn-check btn-sm" name="option" id="option-1" value="yes"> <label class="btn btn-outline-success" for="option-1">Yes</label> <input type="radio" class="btn-check btn-sm" name="option" id="option-2" value="na"> <label class="btn btn-outline-secondary" for="option-2">I Don't Know</label> <input type="radio" class="btn-check btn-sm" name="option" id="option-3" value="no"> <label class="btn btn-outline-danger" for="option-3">No</label> </div> </div> 给你... 从 btn-sm 元素中删除 <input> 类。 将 btn-sm 类添加到 <div class="btn-group col-6" role="group"> 和所有三个 <label> 元素。 请参阅下面的片段。 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <div class="row g-2 mx-2 my-2"> <div class="btn-group col-6 btn-sm" role="group"> <input type="radio" class="btn-check" name="option" id="option-1" value="yes" /> <label class="btn btn-outline-success btn-sm" for="option-1">Yes</label> <input type="radio" class="btn-check" name="option" id="option-2" value="na" /> <label class="btn btn-outline-secondary btn-sm" for="option-2">I Don't Know</label> <input type="radio" class="btn-check" name="option" id="option-3" value="no" /> <label class="btn btn-outline-danger btn-sm" for="option-3">No</label> </div> </div> 您也可以将 div 中的 btn-group 类更改为 btn-group-sm。 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="row g-2 mx-2 my-2"> <div class="btn-group-sm col-6" role="group"> <input type="radio" class="btn-check" name="option" id="option-1" value="yes" /> <label class="btn btn-outline-success" for="option-1">Yes</label> <input type="radio" class="btn-check" name="option" id="option-2" value="na" /> <label class="btn btn-outline-secondary" for="option-2">I Don't Know</label> <input type="radio" class="btn-check" name="option" id="option-3" value="no" /> <label class="btn btn-outline-danger" for="option-3">No</label> </div> </div>

Angular Material 单选按钮组需要验证不起作用

我试图在用户单击“提交”时验证单选按钮组。文本字段和下拉列表在无效时显示红色，但单选按钮颜色在无效时不会更改。有什么建议吗？...

如何设置选中单选输入的父标签的样式

我需要对一些无线电输入进行风格化。我从这里尝试了一些解决方案，但没有一个对我有用。有人可以看一下这段代码并告诉我我能做什么吗？ 这是 HTML： 我需要对一些 radio 输入进行样式化。我从这里尝试了一些解决方案，但没有一个对我有用。有人可以看一下这段代码并告诉我我能做什么吗？ 这是 HTML： <div class="controls"> <table> <tbody> <tr> <td> <label class="radio"> <input type="radio" name="ad_caroserie" value="0">Berlina </label> </td> <td> <label class="radio"> <input type="radio" name="ad_caroserie" value="1">Break </label> </td> <td> <label class="radio"> <input type="radio" name="ad_caroserie" value="2">Cabrio </label> </td> </tr> </tbody> </table> </div> 还有 CSS： label.radio { background: #fcb608; } .radio input { display: none; } label.radio input[type="radio"]:checked + label { background: #000 !important; border: 1px solid green; padding: 2px 10px; } CSS没有达到预期的效果；你能帮我吗？ 这是JS的一些相关摘录： // If checkboxes or radio buttons, special treatment else if (jQ('input[name="'+parentname+'"]').is(':radio') || jQ('input[name="'+parentname+'[]"]').is(':checkbox')) { var find = false; var allVals = []; jQ("input:checked").each(function() { for(var i = 0; i < parentvalues.length; i++) { if (jQ(this).val() == parentvalues[i] && find == false) { jQ('#adminForm #f'+child).show(); jQ('#adminForm #row_'+child).show(); find = true; } } }); if (find == false) { jQ('#adminForm #f'+child).hide(); jQ('#adminForm #row_'+child).hide(); //cleanup child field if (jQ('#adminForm #f'+child).is(':checkbox') || jQ('#adminForm #f'+child).is(':radio')) { jQ('#adminForm #f'+child).attr('checked', false); } else { if (cleanValue == true) { jQ('#adminForm #f'+child).val(''); } } } } else { var find = false; for(var i = 0; i < parentvalues.length; i++) { if (jQ('#adminForm #f'+parentname).val() == parentvalues[i] && find == false) { jQ('#adminForm #f'+child).show(); jQ('#adminForm #row_'+child).show(); find = true; } } if(find == false) { jQ('#adminForm #f'+child).hide(); jQ('#adminForm #row_'+child).hide(); // cleanup child field if (jQ('#adminForm #f'+child).is(':checkbox') || jQ('#adminForm #f'+child).is(':radio')) { jQ('#adminForm #f'+child).attr('checked', false); } else { if (cleanValue == true) { jQ('#adminForm #f'+child).val(''); } } } } } function dependency(child,parentname,parentvalue) { var parentvalues = parentvalue.split(","); // if checkboxes jQ('input[name="'+parentname+'[]"]').change(function() { checkdependency(child,parentname,parentvalues,true); //if checkboxes jQ('input[name="'+child+'[]"]').change(); jQ('input[name="'+child+'"]').change(); jQ('#'+child).change(); }); // if buttons radio jQ('input[name="'+parentname+'"]').change(function() { checkdependency(child,parentname,parentvalues,true); // if checkboxes jQ('input[name="'+child+'[]"]').change(); jQ('input[name="'+child+'"]').change(); jQ('#'+child).change(); }); jQ('#f'+parentname).click(function() { checkdependency(child,parentname,parentvalues,true); // if checkboxes jQ('input[name="'+child+'[]"]').change(); jQ('input[name="'+child+'"]').change(); jQ('#f'+child).change(); }); checkdependency(child,parentname,parentvalues,false); } 一种可能性 在我发帖时，我不太确定所需的布局应该是什么，但尝试的 CSS 中有一个具体问题需要解决。 相邻兄弟选择器: ...分隔两个选择器，并且仅当第二个元素紧跟在第一个元素之后时才匹配第二个元素。 如果 <input> 是 <label> 的子级，则它不相邻，因此 while: label.radio input[type="radio"]:checked + label 正在寻找紧随 label :checked 内的 input 中的 label，并且类为 .radio，不存在类似的情况。 在这种情况下，要更改 label 的样式，需要一个影响父级的选择器，而目前不可能。 因此，要选择 label :checked 中的 input，我们需要 label 相邻，而不是父级。 我们可以使用 for="id" 属性: A <label> 可以通过将控制元素放置在 <label> 元素内或使用 for 属性与控件关联。 正如我所说，我不太确定所需的布局应该是什么，但这里有一个使用 for 属性的示例，看起来还不错。 div { display: inline-block; position: relative; } label { background: #fcb608; padding: 2px 10px 2px 1.5em; border: 1px solid transparent; /* keeps layout from jumping */ } input { position: absolute; } input[type="radio"]:checked + label { background: #000; border-color: green; color: white; } <div> <input id="id1" type="radio" name="ad_caroserie" value="0"> <label for="id1" class="radio">Berlina</label> </div> <div> <input id="id2" type="radio" name="ad_caroserie" value="1"> <label for="id2" class="radio">Break</label> </div> <div> <input id="id3" type="radio" name="ad_caroserie" value="2"> <label for="id3" class="radio">Cabrio</label> </div> 与 <input> 作为 <label> 的孩子 使用小型 JavaScript 处理程序 监听 更改到<form>。 如果检测到 change，触发的函数会检查 <input type="radio"> 是否已更改，如果是，则检查其 <label> 是否为 parentElement。 如果这是真的，它会检查是否存在同名的 <input type="radio">，它是具有 <label> class 的 .checked 元素的子元素。 如果有，它会从 class 中删除 <label>，然后将相同的 class 应用于触发整个事件的 <label> <input> 的 target 父级。 let form = document.querySelector( "form" ); form.addEventListener( "change", ( evt ) => { let trg = evt.target, trg_par = trg.parentElement; if ( trg.type === "radio" && trg_par && trg_par.tagName.toLowerCase() === "label" ) { let prior = form.querySelector( 'label.checked input[name="' + trg.name + '"]' ); if ( prior ) { prior.parentElement.classList.remove( "checked" ); } trg_par.classList.add( "checked" ); } }, false ); label { background: #fcb608; padding: 2px 10px 2px 0; border: 1px solid transparent; /* keeps layout from jumping */ } label.checked { background: #000; border-color: green; color: white; } <form> <label class="radio"><input type="radio" name="ad_caroserie" value="0">Berlina</label> <label class="radio"><input type="radio" name="ad_caroserie" value="1">Break</label> <label class="radio"><input type="radio" name="ad_caroserie" value="2">Cabrio</label> </form> 如果没有 JavaScript，事情就会变得困难（根据我最初的解释，为什么在这种情况下最好使用 for 属性）。 我们可以使用 appearance 属性（带有前缀和合理的支持）来有效隐藏用户代理 radio GUI，然后使用剩余的 faceless 元素构建一个 fake background 对于 <label>。 这是非常老套的，并且比默认的动态性要差很多，因为需要一些absolute定位和特定尺寸才能实现它。 它有点有效（在大多数浏览器中），但在站点范围内实施很棘手。 不过有一些可以玩的东西:-) input { position: absolute; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 5em; height: 1.5em; z-index: -1; background: #fcb608; border: 1px solid transparent; margin: -.1em -.8em; outline: 0; } label { display: inline-block; width: 5em; color: white; text-shadow: 1px 1px 0px black; } input[type="radio"]:checked { background: #000; border-color: green; } <label class="radio"><input type="radio" name="ad_caroserie" value="0">Berlina</label> <label class="radio"><input type="radio" name="ad_caroserie" value="1">Break</label> <label class="radio"><input type="radio" name="ad_caroserie" value="2">Cabrio</label> 只需将 jQuery 与新的 css 类“selected”一起使用，如下所示： 开始时： $("input[name='ad_caroserie']:checked").parent().addClass("selected"); 和变化： $('input[type=radio][name=ad_caroserie]').change(function() { $("input[name='ad_caroserie']").parent().removeClass("selected"); $("input[name='ad_caroserie']:checked").parent().addClass("selected"); // console.log($("input[name='ad_caroserie']:checked").val()); }); 在尝试了很多次纯 HTML 和 CSS 之后。我正在用 JavaScript 解决这个简单的解决方案。我认为这会有所帮助。 function check(btn) { let label = btn.children; label[0].checked = true; } .lib-radio { color: #1e1e1e; font-size: 1.0em; border-radius: 31px; font-weight: 400; width: 450px; height: 40px; border: 2px solid black; padding: 0.5em; font-family: Lato; margin: 10px 0 0 0; } .lib-radio:hover { background-color: #000; color: #FFF; } <div class="lib-one-input"> <p class="lib-form-label">Select your gender</p> <div class="lib-radio" onclick="check(this)"> <input id="s1yes" type="radio" name="mcq1" value="male"> <label for="s1yes"> Yes, our researchers authored it</label><br /> </div> <div class="lib-radio" onclick="check(this)"> <input id="s1no" type="radio" name="mcq1" value="female"> <label for="s1no"> No, we didn&#39t author it </label><br /> </div> </div> <form id="button-form"> <fieldset id="button-set"> <label for="button-1"> <input type="radio" id="button-1" name="button-group"/> </label> <label for="button-2"> <input type="radio" id="button-2" name="button-group"/> </label> <label for="button-3"> <input type="radio" id="button-3" name="button-group"/> </label> </fieldset> </form> <style> #button-set label > * { opacity: 0; <!-- hideing the radio buttons --> } </style> <script> function setColor(color) { document.getElementsByName("button-group").forEach(node => { node.checked === true ? (node.parentElement.style.background = color) : (node.parentElement.style.background = "rgba(0, 0, 0, 0.5)"); }); } window.onload = () => { document.getElementById("button-form").onchange = evt => { switch (evt.target) { case document.getElementsById("button-1"): setColor("rgba(0, 150, 0, 0.5)"); break; case document.getElementsById("button-2"): setColor("rgba(250, 200, 0, 0.5)"); break; case document.getElementsById("button-3"): setColor("rgba(250, 0, 0, 0.5)"); break; } }; }; </script>

如何更改.Net MAUI中ContentPresenter的文本颜色

我在我的应用程序中使用了自定义样式的单选按钮，它使用 ContentPresenter 来显示文本/内容。我想更改文本的颜色。 我尝试过 TextColor 和 TextBlock。