关于js获取radio和select的属性并控制的代码_javascript技巧

实现目标:1、点击“匿名小组”,自动跳转:成员类型“私密群”、访问控制 “群成员”
       2、点击“公开群”,  自动跳转:成员类型“实名小组” 

  

  首先是获得点击radio的事件,用的是jquery库,获得事件后判断是那个radio,通过判断是那个radio被checked了然后进行联动变换。其中遇到的问题有,兼容ie和firefox的事件,然后是设置select中的中options的selected属性。

  兼容ie和firefox用了var ie=document.all;var nn6=document.getElementById&&!document.all;

  设置select中的中options的selected属性用的是var t=document.getElementsByName("select1")[0][1]; t.setAttribute("selected","selected");

  在设置selected属性通常用的是document.getElementsByName("select1").options,但是firefox报undefined。于是遍历后就用了一个数组解决了。

  下面是实现了目标1的完整代码:
html

复制代码 代码如下:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="l.js"></script>
<p><label>成员类型:</label>
<input type="radio" name="member_type" checked="checked" value='0'/>实名小组(使用姓名)
<input type="radio" name="member_type" value='1'/>匿名小组(使用昵称)
</p>
<p><label>群组类型:</label>
<input type="radio" name="search_type" checked="checked" value='1'/>公开群
<input type="radio" name="search_type" value='0'/>私密群
</p>
<p><label>访问控制: </label>
<select class="select1" name="select1">
<option value="0">任何人</option>
<option value="1">群成员</option>
</select>
</p>

js

复制代码 代码如下:

// JavaScript Document
var ie=document.all;
var nn6=document.getElementById&&!document.all;
$(document).ready(function(){
$(":radio").click(function(e){
var $name=(nn6?e.target.name:event.srcElement.name);
if($name == "member_type")
{
if(1 == GetRadioValue($name))
{
SetRadioCheck("search_type",1);
var t=document.getElementsByName("select1")[0][1];
t.setAttribute("selected","selected");
}
}
});
});

实现目标2时,遇到了SetRadioCheck中的setAttribute不好使了,调试了也不知道什么原因于是换了obj[i].checked = true;
实现功能1、2 js

复制代码 代码如下:

// JavaScript Document
var ie=document.all;
var nn6=document.getElementById&&!document.all;
$(document).ready(function(){
/*点击"匿名小组",自动跳转:成员类型"私密群"、访问控制 "群成员"*/
$(":radio").click(function(e){
var $name=(nn6?e.target.name:event.srcElement.name);
if($name == "member_type")
{
if(1 == GetRadioValue($name))
{
SetRadioCheck("search_type",1);
var t=document.getElementsByName("select1")[0][1];
t.setAttribute("selected","selected");
}
}
/*点击"公开群", 自动跳转:成员类型"实名小组"*/
if($name == "search_type")
{
if(1 == GetRadioValue($name))
{
SetRadioCheck("member_type",0);
}
}
});
});
/*获得被check的radio的值
*RadioName:要获得radio值的radio组名称
*/
function GetRadioValue(RadioName){
var obj;
obj=document.getElementsByName(RadioName);
if(obj!=null){
var i;
for(i=0;i<obj.length;i++){
if(obj[i].checked){
return obj[i].value;
}
}
}
return null;
}
/*设置被选中属性
*RadioName:要修改属性radio组的名称
*i:radio中第i个元素被选中
*/
function SetRadioCheck(RadioName,i){
var obj;
obj=document.getElementsByName(RadioName);
//obj[i].setAttribute("checked","checked");
obj[i].checked = true;
}

对于在第二次调用SetRadioCheck

复制代码 代码如下:

if($name == "search_type")
{
if(1 == GetRadioValue($name))
{
SetRadioCheck("member_type",0);
}
}
obj[i].setAttribute("checked","checked")的失效,还请指教。

时间: 2024-12-25 09:55:33

关于js获取radio和select的属性并控制的代码_javascript技巧的相关文章

js 获取、清空input type=&quot;file&quot;的值示例代码_javascript技巧

上传控件基础知识说明: 上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过javascript来赋值,这就使得不能通过value=""语句来清空它.很容易理解为什么只读,如果可以随意赋值的话,那么用户只要打开你的网页,你就可以随心所欲的上传他电脑上的文件了. js 获取<intput type=file />的值 复制代码 代码如下: &l

js获取判断上传文件后缀名的示例代码_javascript技巧

复制代码 代码如下: function lastname(){ //获取欲上传的文件路径var filepath = document.getElementById("file1").value; //为了避免转义反斜杠出问题,这里将对其进行转换var re = /(\\+)/g; var filename=filepath.replace(re,"#");//对路径字符串进行剪切截取var one=filename.split("#");//获

js获取鼠标点击的位置实现思路及代码_javascript技巧

copy来的,但是原页面的代码还是需要修改,下面是修改可用的 常用的是 event.clientX和event.clientY分别获取横向的和纵向的位置,但仅使用这个方法是不够的,因为event.clientX和event.clientY获取的鼠标位置是相对于当前屏幕的,而不考虑页面的滚动条所滚动的距离. 复制代码 代码如下: function pointerX(event) { return event.pageX || (event.clientX + (document.documentE

js获取页面及个元素高度、宽度的代码_javascript技巧

网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线和滚动条的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高(f

js如何获取file控件的完整路径具体实现代码_javascript技巧

今天做一个项目,需要隐藏input file然后获取它的值,但连jquery都无法获取它的值 复制代码 代码如下: <script type="text/javascript"> //FX获取文件路径方法 function readFileFirefox(fileBrowser) { try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); } catc

js实现Select头像选择实时预览代码_javascript技巧

本文实例讲述了js实现Select头像选择实时预览代码.分享给大家供大家参考.具体如下: 这里演示js实现Select头像选择,实时预览效果,在留言或评论的时候,让用户简易的选择头像,以前最常见的方式是使用单选框,当然使用其它的形式也可以,比如今天这个Select,下拉选框选择头像,也是不错的体验. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-ico-pic-view-codes/ 具体代码如下: <!DOCTYPE ht

js获取及修改网页背景色和字体色的方法_javascript技巧

本文实例讲述了js获取及修改网页背景色和字体色的方法.分享给大家供大家参考,具体如下: 获得网页的背景色和字体颜色,方法如下: 思想: 通过取得颜色属性值得到的是 rgb 色,不是我们想要的,所以需要将 rgb 色装换为 十六进制色 ,首先获得rgb色 : 代码如下: 复制代码 代码如下: var rgb = document.getElementById('color').style.backgroundColor; 得到格式如下: rgb(225, 22, 23); 然后进行拆分: 代码如下

js 获取元素在页面上的偏移量的方法汇总_javascript技巧

使用js制作效果时,我们常常要获取某个元素在页面上的偏移量(例如tip提示框功能).而获取偏移量可以直接获取相对于document的偏移量,也可以获取相对与视口的偏移量(viewpoint)加上页面滚动量(scroll)获得. 1.获取相对与document的偏移量 function getOffsetSum(ele){ var top= 0,left=0; while(ele){ top+=ele.offsetTop; left+=ele.offsetLeft; ele=ele.offsetP

JS获取表格内指定单元格html内容的方法_javascript技巧

本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组,然后定位指定的单元格,通过单元格的innerHTML属性获得单元格的html内容 <!DOCTYPE html> <html> <head> <script> function cell() { var x=document.getElementById('myTable').rows[0].cells;