个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我希望 3 个 radio 可见，其他 radio 隐藏在下拉菜单中。当从下拉列表中选择一个 radio 时，我希望它移动到可见 radio 中的第一个位置。第三个(或现在是第四个)可见 radio 应移至下拉列表中，以便我始终只有 3 个可见 radio 。
我不能简单地更改标签，因为我在剩余脚本中使用了 radio 的 ID(参见下面 js 脚本中的最后一行):
我只想使用普通 JS (没有 Jquery...)。
这是我的 html:
<div id="sourcecontainer">
<div> From
<div>
<input type="radio" id="fr" name="source" value="fr">
<label for="fr">fr</label>
</div>
<div>
<input type="radio" id="en" name="source" value="en">
<label for="en">en</label>
</div>
<div>
<input type="radio" id="auto" name="source" value="auto" checked>
<label for="auto">auto</label>
</div>
<nav id="topNav">
<a href="#" title="Others" id="othersLanguageSource">Others</a>
<ul id="listothersLanguageSource" style="list-style: none; display:none;">
<li><input type="radio" id="pr1" name="source" value="1">Preset 1</li>
<li><input type="radio" id="pr2" name="source" value="2">Preset 2</li>
<li><input type="radio" id="pr3" name="source" value="3">Preset 3</li>
<li><input type="radio" id="pr4" name="source" value="4">Preset 4</li>
</ul>
</nav>
</div>
<input id="text" type="text" value="" autofocus />
</div>
这是我的js:
...
var menuTopNav = document.getElementById('topNav');
menuTopNav.addEventListener('mouseover', function () {
var listothersLanguageSource = document.getElementById("listothersLanguageSource")
listothersLanguageSource.style.display = "block";
listothersLanguageSource.style.display = "block";
}, false);
menuTopNav.addEventListener('mouseout', function () {
var listothersLanguageSource = document.getElementById("listothersLanguageSource")
listothersLanguageSource.style.display = "none";
listothersLanguageSource.style.display = "none";
}, false);
var sourceLang = document.querySelector('input[name="source"]:checked').value;
...
...
最佳答案
试试这个
let langs = [
{ id: 'en', value: 'en', text: 'en' },
{ id: 'fr', value: 'fr', text: 'fr' },
{ id: 'auto', value: 'auto', text: 'auto', checked: true },
{ id: 'pr1', value: 'pr1', text: 'Preset 1' },
{ id: 'pr2', value: 'pr2', text: 'Preset 2' },
{ id: 'pr3', value: 'pr3', text: 'Preset 3' }
];
function render() {
let mainLanguageSource = '';
let othersLanguageSource = '';
langs.forEach((item, index) => {
if (index <= 2) {
mainLanguageSource += '<div>'
+ '<input type="radio" id="' + langs[index].id + '" name="source" value="' + langs[index].value + '" ' + (langs[index].checked ? 'checked' : '') + '>'
+ '<label for="' + langs[index].id + '">' + langs[index].text + '</label>'
+ '</div>';
} else {
othersLanguageSource += '<li>'
+ '<input type="radio" id="' + langs[index].id + '" name="source" value="' + langs[index].value + '" ' + (langs[index].checked ? 'checked' : '') + '>'
+ '<label for="' + langs[index].id + '">' + langs[index].text + '</label>'
+ '</li>';
}
});
document
.getElementById('mainLanguageSource')
.innerHTML = mainLanguageSource;
document
.getElementById('listothersLanguageSource')
.innerHTML = othersLanguageSource;
// add event listeners
document.querySelectorAll('[name="source"]').forEach(function(input) {
input.addEventListener('change', function(event) {
let position;
langs.forEach((item, index) => {
if (item.id === event.target.value) {
position = index;
item.checked = true;
} else {
delete item.checked;
}
});
langs.unshift(langs.splice(position, 1)[0]);
render();
});
});
}
render();<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="sourcecontainer">
<div> From
<div id="mainLanguageSource">
<!-- Filled from js -->
</div
<nav id="topNav">
<a href="#" title="Others" id="othersLanguageSource">Others</a>
<ul id="listothersLanguageSource" style="list-style:">
<!-- Filled from js -->
</ul>
</nav>
</div>
<input id="text" type="text" value="" autofocus />
</div>
</body>
</html>关于javascript - 更改单选按钮的顺序 : display the checked above the drop down list，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57374043/
25
4
0
这个问题在这里已经有了答案: What's the proper value for a checked attribute of an HTML checkbox? (10 个答案) 关闭 8 年
我使用这个制作了自定义复选框: enter link description here 也可在 stackoverflow 上获得:enter link description here 但我正在尝试
我需要使用 CSS“checkbox-hack”来实现滑动菜单指示器效果，我唯一的方法是通过 JavaScript 附加输入元素。我被迫通过在线工具 MonoSolutions 执行此操作，并且我受到
此代码运行良好，但缺少一些我需要的东西。基本上，如果输入有一个 checked="checked" 属性，它应该使其他两个元素保持禁用状态。如果未选中，则元素已启用。 这是我在 jsFiddle 上的
当我的人 checkout 文件时，我希望他们将其锁定，以便其他人也无法进行更改，我从这篇文章中看到:http://msdn.microsoft.com/en-us/library/jj155783.
请告诉我这些函数的作用。 最佳答案 这些是基于框架的、与语言无关的方法，用于在 .NET 中定义代码契约。虽然某些语言(如 spec# 和 Delphi Prism)对代码契约具有一流的语言支持，但这
假设以下场景:您有 2 个单选按钮，它们具有相同的名称，并且都被选中(我知道这是无效的): 为什么下面两个选择器的行为不同？ $('.input:checked').size(); // retu
我正在尝试收听广播。以下均不起作用: [编辑] $('selector').attr('checked','checked'); $('selector').attr('checked',true);
我实际上在努力理解此类型错误。 任何人都知道我如何更正代码？谢谢 CheckIn checkin1 = new CheckIn(location1, dt); CheckInMonths checkI
我有这段代码，但不起作用。 .on("click","span.name", function selectThisName(e) { if (e.altKey) {
我现在是 Espresso 的新手，我遇到了这个异常: android.support.test.espresso.AmbiguousViewMatcherException: 'with id: a
我已经创建了一个基本的 2 单选按钮表单，如下面的示例所示。 观察浏览器渲染，我们看到元素 1 被选中。我们检查元素 1 和元素 2。 当我点击元素 2 时，我希望元素 1 的 checked=che
我在查找以下 jquery/checkbox 行为的原因时遇到问题。 $( this.obj + ' table.sgrid-content > thead > tr > th > input.sel
以下逻辑应用在上午 10 点触发并运行 SQL Server 查询。从图片中可以看出，结果集是空的。 条件检查检查查询的结果集是否为空。 (第二张图) 这仍然如何转化为 True？结果显然是空的。 最
我想知道哪种操作更快: int c = version1.compareTo(version2); 这个 if (c == 1) 或者这个 if (c > 0) 符号比较是否只使用一位检查，而相等比较
我有一个包含大约 100 个问题的表单，每个问题都有一个单选按钮和一些复选框，因此我需要用户能够保存表单并在以后加载它。我还需要检查用户在此 session 中更改了哪些。 本题解决问题:How ca
我正在编写一个小程序，需要用户决定一些 bool 值。我已经制作了复选框来处理这一部分，但问题是每次我选中或取消选中一个复选框时，所有其他复选框都会跟随。 我在网上搜索过，但我找到的唯一解释( pyt
我有以下代码片段(我使用的是 jQuery 1.4.2): $.post('/Ads/GetAdStatsRow/', { 'ad_id': id }, function(result) {
我的代码发生了一些奇怪的事情。我有两个按钮，其中一个带有 .add 和 .remove 类，有一个复选框会根据按下哪个按钮而打开和关闭，因此如果您使用删除按钮删除，则选中的复选框将被选中，否则复选框将
我陷入了一种情况，我必须通过“选中”工具栏中的复选框来“选中”列表中存在的所有复选框。 这是创建复选框列表的代码:- itemTpl: 'checked="checked" /> {groupName
我是一名优秀的程序员,十分优秀！