JS怎么实现类似单选功能的效果，选中一个，其他的自动取消 - JavaScript当前位置:& &&&JS怎么实现类似单选功能的效果，选中一个，其他的自JS怎么实现类似单选功能的效果，选中一个，其他的自动取消&&网友分享于：&&浏览：0次JS如何实现类似单选功能的效果，选中一个，其他的自动取消
var&li&=&document.getElementsByTagName('li');
for&(var&i&=&0;&i&&&li.&i++)&{
li[i].onclick&=&function()&{
&&&&if&(this.className)&{
this.className&=&'';
&&&&}&else&{
this.className&=&'selected';
现在的状况是，点击任意一个li，如果没有设置类别选择器，就给他加上类别选择器，如果有了就取消
我想实现的是，选中一个，增加了&selected&后，选中另一个，那么之前选中的自动取消，去掉&selected&------解决思路----------------------遍历兄弟元素&classname置为空
var&li&=&document.getElementsByTagName('li');
for&(var&i&=&0;&i&&&li.&i++)&{
li[i].onclick&=&function()&{
for(var&j&=&0;&j&&&li.&j++)
if(li[j]!=this)&li[j].classname='';&
&&&&&&&&&&&&if&(this.className)&{
&&&&&&&&&&&&this.className&=&'';
&&&&&&&&&&&&}&else&{
&&&&&&&&&&&&this.className&=&'selected';
&&&&&&&&&&&&}
}------解决思路----------------------
&var&li&=&document.getElementsByTagName('li');
&&&&&&&&&&&&for&(var&i&=&0;&i&&&li.&i++)&{
&&&&&&&&&&&&&&&&li[i].onclick&=&function&()&{
&&&&&&&&&&&&&&&&&&&&var&li&=&document.getElementsByTagName('li');
&&&&&&&&&&&&&&&&&&&&for&(var&i&=&0;&i&&&li.&i++)&{
&&&&&&&&&&&&&&&&&&&&&&&&if&(li('li')[i]&!=&this)
&&&&&&&&&&&&&&&&&&&&&&&&&&&&li('li')[i].className&=&'';
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&if&(this.className)&{
&&&&&&&&&&&&&&&&&&&&&&&&this.className&=&'';
&&&&&&&&&&&&&&&&&&&&}&else&{
&&&&&&&&&&&&&&&&&&&&&&&&this.className&=&'selected';
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
重新贴一次。。。
要是使用jq&就简单点了。------解决思路----------------------
var&li&=&document.getElementsByTagName('li');
var&tempLi&=&{};
for&(var&i&=&0;&i&&&li.&i++)&{
li[i].onclick&=&function()&{
this.className&=&'selected';
tempLi.className&=&'';
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有下次自动登录
现在的位置:
& 综合 & 正文
js实现翻页后保持checkbox选中状态
在项目中有需求如下：上下分页后，选中的checkbox状态保持不变。
项目中的分页使用真分页，每次点击上下页按钮后，再次调用后台方法查询，重新刷新此页面。所以checkbox为false。
比如酷狗音乐中，上下页选中的歌曲不会保留，只能在每页中选择添加后，再切换下页。
但是项目中有着需求，所以只能完成实现。
项目具体的需求如下：给角色授权时，选择模块以及模块下的操作，点击上下页后选中的checkbox不变。
界面如下：
实现的思路如下：
在界面中，使用纯js完成。把选中的checkbox中的id，其中包括模块id，操作id，拼接成一个字符串，然后把字符串传递到action中。
每次调用此页面时，首选调用action中的选中的id字符串，然后根据在id字符串的基础上，再次拼接本界面中选中的id。选中的checkbox，需要判断，若不在id容器中，则加载进来；未选中的checkbox，需要判断，若原来在id容器中，则需要删除；
在页面完全加载完毕后，界面中checkbox与拼接的id字符串容器进行比较，若在字符串容器中，在checkbox自动勾选。否则为false。
提示说明：
因为本思路是把拼接的id作为字符串，则在js中获取action中的选中的id字符串时，需要注意语法。
思路实现如下：
java中获取action的id容器：
String ids= (String)request.getAttribute("ids");
if((ids==null)){
js代码：上一页函数：
function _prePage()
var ids="&%=ids%&";
var checkedIds= new String(ids);
var modules = document.getElementsByName("module");
var operates = document.getElementsByName("operate");
for ( var i = 0; i & modules. i++) {
if (modules[i].type == "checkbox" && modules[i].checked) {
if(checkedIds.indexOf(modules[i].value)==-1){
checkedIds=checkedIds+modules[i].value+",";
//判断模块下的操作
for ( var j = 0; j & operates. j++) {
var operateId = new String(operates[j].id);
operateId = operateId.substring(0, operateId.indexOf(","));
if (modules[i].value == operateId) {
if (operates[j].type == "checkbox"&& operates[j].checked) {
if(checkedIds.indexOf(operates[j].value)==-1){
checkedIds=checkedIds+operates[j].value+",";
if(operates[j].checked==false){
if(checkedIds.indexOf(operates[j].value)!=-1){
checkedIds=checkedIds.replace((operates[j].value+","),"");
if(modules[i].checked==false){
if(checkedIds.indexOf(modules[i].value)!=-1){
checkedIds=checkedIds.replace((modules[i].value+","),"");
with(document.forms[0])
action="roleAuthoriedManager!getModuleOperateBySystem?roleId="
+document.getElementById("roleId").value
+"&systemId="+document.getElementById("systemId").value
+"&pageNo="+&%=pageModelModule.getPreviousPageNumber()%&
+"&queryString="+document.getElementById("searchById").value
+"&ids="+checkedI
method="post";
在界面完全加载完毕后js代码如下：
document.onreadystatechange=
function statechange()
var ids="&%=ids%&";
var checkedIds= new String(ids);
if(document.readystate="complete")
//循环所有的控件
var inputs=document.getElementsByTagName("input");
for(var i=0;i&inputs.i++)
if(inputs[i].type=="checkbox")
if(checkedIds.indexOf(inputs[i].value)!=-1)
inputs[i].checked=
说明：在做测试时，但是一直提示，函数未定义，不仅提示下页函数未定义，凡是界面上所有的按钮全部提示未定义。所以纠结了很长时间。解决后，拿出分享下。
遇到这种情况，肯定是页面上有错误。jsp解析成html后，html页面中肯定有语法问题，导致这个html页面无法解析。
开始的js某一句代码：varids=&%=ids%&;
查看源文件时，发现js中下一页的某一句代码解析如下：varids=;
这种语法问题，肯定无法解析，所以才一直无法运行。
出现这种情况的原因是：var ids=&%=ids%&;从action传过来id容器是空串，所以解析后就成var ids=;
因为把id容器当作字符串，所以需要var ids="&%=ids%&"即使传过来的是空串，解析结果如下：var ids="";
总结：遇到整个页面的js函数都无法执行，肯定说明js有问题，某个js函数中的语法问题，导致整个页面无法解析运行。若是某个js函数未定义，则有可能是函数名与标签定义的函数不相同。若是某个js函数中某个语句中某个字符未定义，则会明确提示未定义的字符。
&&&&推荐文章:
【上篇】【下篇】解决jquery操作checkbox全选全不选无法勾选问题
解决jquery操作checkbox全选全不选无法勾选问题
最近在工作中使用jquery操作checkbox，使用下面方法进行全选、反选:
$(input[name='checkbox']).attr(checked,checked);
调试时，前两次都没有问题，可以正常显示选中和取消，但当再去选中的时候，复选框的属性checkbox值变为checked，没问题，但是复选框却不在显示选中状态，明明属性值改了，但是却不显示勾选，太诡异了。代码修改了却得不到正确的显示状态，纠结了很久，找不到原因。
于是乎各种找原因，后来在网上搜到一篇文章提醒了我，原来是jQuery版本问题。
我操作属性用的是
$(XXX).attr(attrName);而jQuery的版本用的是2.1.1，这就是存在一个兼容性和稳定性问题。
jQuery API明确说明，1.6+的jQuery要用prop，尤其是checkBox的checked的属性的判断，即
使用代码如下:
$(input[name='checkbox']).prop(checked);
$(input[name='checkbox']).prop(disabled, false);
$(input[name='checkbox']).prop(checked, true);
于是乎将attr改为prop，问题得解。
如果您遇到这个奇怪的问题那就赶紧试试吧！
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'CheckBox复选框JS实现全选全不选功能
CheckBox复选框JS实现全选全不选功能
CheckBox控件就是我们一般所说的复选框，通常用于某选项的打开或关闭。大多数应用程序的“设置”对话框内均有此控件。我们看到的可以打勾的就是CheckBox。
　　该控件表明一个特定的状态（即选项）是选定 (on，值为1) 还是清除
(off，值为0)。在应用程序中使用该控件为用户提供“True/False”或“yes/no”的选择。因为 CheckBox
彼此独立工作，所以用户可以同时选择任意多个 CheckBox，进行选项组合。
CheckBox复选框JS实现全选全不选功能,很简单，就只需插入一小段js函数就行了。。。
----------------------------------------------------
language="javascript"&
& function&&
&&var collid =
document.getElementByIdx_x("all")
&&var coll =
document.getElementsByName(Obj)
&&if (collid.checked){
for(var i = 0; i & coll. i++)
coll[i].checked =
for(var i = 0; i & coll. i++)
coll[i].checked =
----------------------------------------------------
下面是一组CheckBox复选框html代码
----------------------------------------------------
&input name='多选项名称' type='checkbox' value='' id="all"&
onclick="cli('多选项名称');"&&
&input name='多选项名称'
type='checkbox' value='' && A
&input name='多选项名称'
type='checkbox' value='' && B
&input name='多选项名称'
type='checkbox' value='' && C
&input name='多选项名称'
type='checkbox' value='' && D
&input name='多选项名称'
type='checkbox' value='' && E
&input name='多选项名称'
type='checkbox' value='' &&
----------------------------------------------------
好了，你可以复制一下以上的代码，修改测试一下。。。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。