常用js

阅读量：2497 次

发布时间：2019-05-11

本文共 3812 字，大约阅读时间需要 12 分钟。

常用js

1. Checkbox选中：

功能：根据checkbox选择的值，动态改变radio的值，

如选中iphone或android，出现样式1-5；

选中wp，出现样式1,2,6

<td >

<input type="checkbox" id="clientId1" οnclick="go();" name="indexFloor.clientId" value="apple" checked /> iphone

<input type="checkbox" id="clientId2"οnclick="go();" name="indexFloor.clientId" value="android" checked /> android

<input type="checkbox" id="clientId3" οnclick="go();"name="indexFloor.clientId" value="ipad" /> ipad

<input type="checkbox" id="clientId4"οnclick="go();" name="indexFloor.clientId" value="m" /> m

<input type="checkbox" id="clientId5"οnclick="go();" name="indexFloor.clientId" value="wp" /> wp

</td>

<tr>

<td>

<input type="radio" id="templateType1" name="indexFloor.templateType" value="401" size="20" checked />样式一

<input type="radio" id="templateType2" name="indexFloor.templateType" value="402" size="20" />样式二

<input type="radio" id="templateType3" name="indexFloor.templateType" value="403" size="20" />样式三

<input type="radio" id="templateType4" name="indexFloor.templateType" value="404" size="20" />样式四

<input type="radio" id="templateType5" name="indexFloor.templateType" value="405" size="20" />样式五

<input type="radio" id="templateType6" name="indexFloor.templateType" value="406" size="20" />样式六

<input type="radio" id="templateType7" name="indexFloor.templateType" value="407" size="20" />样式七

<li class="red"id="commonInfo" style="color:red;display: none" ><span class="red">*</span>iphone,android只支持样式1-5,wp只支持样式1,2,6</li>

</td>

</tr>

//动态处理平台与楼层样式的映射关系

function go() {

var str=",";

var check = $(":checkbox");

check.each(function(){

if($(this).attr("checked")){

str += $(this).val()+","//拼接checkbox的value串

}

}) ;

//先把所有的radio置空

$("#templateType1").hide();

$("#templateType2").hide();

$("#templateType3").hide();

$("#templateType4").hide();

$("#templateType5").hide();

$("#templateType6").hide();

$("#templateType7").hide();

$("#commonInfo").css("display","none");

if(str.indexOf("wp")>0) {

//wp只支持1,2,6

$("#templateType1").show(); //对应的checkbox展示

$("#templateType2").show();

$("#templateType6").show();

$("#commonInfo").css("display","block"); //提示信息设为显示

} else if(str.indexOf("apple")>0 ||str.indexOf("android")>0 ) {

//apple和android支持1,2,3,4,5

$("#templateType1").show();

$("#templateType2").show();

$("#templateType3").show();

$("#templateType4").show();

$("#templateType5").show();

$("#commonInfo").css("display","block");

}

2. 只读:

功能：编辑模式，部分字段设为只读

<td>

<input type="text" id="indexFloor.floorSortNo" name="indexFloor.floorSortNo" value="$!indexFloor.floorSortNo" size="20"

#if($!indexFloor.floorId>0)

disabled='disabled'

#end

</td>

//给出平台的默认选中状态

$(document).ready(function() {

var floorId = document.getElementById("indexFloor.floorId").value;

var check = document.getElementsByName("indexFloor.clientId"); //选中所有checkbox

var platforms=","+$("#platforms").val(); //取到列表中传来的默认值

//遍历默认值，修改checkbox的选中状态

for (var i = 0; i < check.length; i++) {

if(platforms.indexOf(check[i].value)>0 ) {

check[i].checked = true; //选中状态

}

if(floorId>0){

check[i].disabled =true; //修改状态设为只读

}

var templateTypes = document.getElementsByName("indexFloor.templateType");

for (var i = 0; i < templateTypes.length; i++) {

if(floorId>0){

templateTypes[i].disabled =true; //只读

}

});

3. 获取选中的radio

<tr>

<td>

<input type="radio" name="indexFloorModel.backupFlag" id="backupFlag1" value="0" #if($indexFloorModel.backupFlag == 0) checked="checked" #end /> 常规

<input type="radio" name="indexFloorModel.backupFlag" id="backupFlag2" value="1" #if($indexFloorModel.backupFlag == 1) checked="checked" #end /> 备份

</td>

</tr>

var backupFlag = 0;

var chkObjs = document.getElementsByName("indexFloorModel.backupFlag");//获取元素

for(var i=0;i<chkObjs.length;i++){//遍历元素，判断状态

if(chkObjs[i].checked){

backupFlag = chkObjs[i].value;//赋值

break;

}

你可能感兴趣的文章