欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

表单组件的各种操作(取值、赋值、属性) 博客分类: Web-JS/JQuery  

程序员文章站 2024-03-25 16:24:16
...

 

一、input-text

<input type="text" name="customName" id="customName" value="${o.customName }"/>

 

//取值:
    var customName1 = $('#customName').val();
    var customName2 = $('input[name="customName"]').val();
    var customName3 = $('input[type="text"][name="customName"]').val();
//赋值:
    $('#customName').val(1);
    $('input[name="customName"]').val(2);
    $('input[type="text"][name="customName"]').val(3);

 

 

二、textarea

<textarea id="form_problem" name="problem" onKeyDown="textCounter(this.form.problem,'problem_length',250);" onKeyUp="textCounter(this.form.problem,'problem_length',250);">${o.problem }</textarea>
<span id="problem_length"></span>
//取值:
    var problem1 = $('#form_problem').val();
     var problem2 = $('input[name="problem"]').text();
//赋值:
    $('#form_problem').val(123);

 

 

限制输入长度:(通过onKeyDown/onKeyUp属性)

	//控制textarea的输入长度,并展示当前输入的数量。(textarea对象,负责展示输入数量的元素名,最大长度)
	function textCounter(field, countfieldId, maxlimit) {
		//如果元素区字符数大于最大字符数,按照最大字符数截断; 
		if (field.value.length > maxlimit){
			field.value = field.value.substring(0, maxlimit);
			return;
		}
		
		//在记数区文本框内显示剩余的字符数;
		var a = field.value.length;
		var b = maxlimit - field.value.length;
		//已录入a字,还可录入b字
		$('#'+countfieldId+'').html('已录入' + a + '字,还可录入' + b + '字');
	}

 

三、select

<select id="form_typeId"  name="typeId" style="width:100px;">
    <option value="1"  class=“c1”>s1</option>
    <option value="2"  class=“c2”>s2</option>
</select>

 

//获取当前选中项的值:
  var typeId1 = $("#form_typeId").val();//1
  var typeId2 = $('#form_typeId option:selected') .val();
//获取当前选中项的文本:
  var typeId1 = $("#form_typeId").text();//s1
  var typeId2 = $('#form_typeId option:selected') .text();
  var typeId3 = $("#form_typeId").find("option:selected").text();
//获取当前选中项的其它属性值:
    var c = $("#form_typeId").find(" option:selected").attr("class”);//c1
//选中指定value的选项:
     $("select[name='parentId'] option[value="+parentId+"]").attr("selected","selected");
     $("#form_typeId").val('1');
//清空select的option选项:
  $('#form_typeId').empty();
//向select增加option选项:
  var op1 = $("<option>").val(1).text("test1");
    $("#form_typeId").append(op1);
//选项修改
//选择商品形态
$('#form_typeId').change(function (o) {
	if($(this).val() == 1){
		$('div.distributeType').show();
	}else if($(this).val() == 2){
		$('div.distributeType').hide();
	}
})

 

 

 

 四、input-radio

<inputtype="radio"name="state"value="10"/>
<inputtype="radio"name="state"value="20"/>

 

//获取当前选中项的值:
  if($("input[name='state']:checked").length == 0){  
    alertMessageContent("请选择...");
    return false;
  } 
  var state = $("input[name='state']:checked").val();
//选中指定value的选项:
    var state = 10;
    $('input[type="radio"][name="state"][value='+state+']').attr("checked","checked");
    $('input:radio[name="state"]:nth(0)').attr('checked',true);  
    $('input:radio[name="state"]:nth(1)').attr('checked',true); 

 

 

 

 

五、input-checkbox

<input type="checkbox" id="typeId_all">
<input type="checkbox" name="typeId" value="${o.TYPEID }"/>

 

//获取选中项的values:
var typeIds = '';
$('input[name="typeId"]').each(function(){
    if($(this).attr("checked") == "true" || $(this).attr("checked") == "checked"){
    typeIds += $(this).val() + ',';
}
 
});
if($("input[name='typeId'][value='2']")[0].checked){  
  $('#show_').hide();  
}
//选中指定value的项:
   $('input[type="checkbox"][name="typeId"][value="1"]').attr("checked","checked");
   $('input[type="checkbox"][name="typeId"][value="1"]').attr("checked",true);
//取消选中指定value的项:
   $('input[type="checkbox"][name="typeId"][value="1"]').removeAttr("checked");
   $('input[type="checkbox"][name="typeId"][value="1"]').attr("checked",false);

//全选/取消全选:
$('#typeId_all').click(function(){
	checkAll("typeId_all","typeId");
});
//复选框全选 inputid:全选框id属性,inputname:被遍历全选的复选框name属性
function checkAll(inputid,inputname){
	if($('#'+inputid).attr("checked")=="true" || $('#'+inputid).attr("checked")=="checked"){
		$('input[name="'+inputname+'"]').each(function(){
			$(this).attr("checked","checked");
		});
	}else{
		$('input[name="'+inputname+'"]').each(function(){
			$(this).removeAttr("checked");
		});
	}
}

 

 

 六、input-button

<input type="button" id="del_submit" value="确定" onclick="doDelType();"/>
//使按钮不可用:
$('#del_submit').attr('disabled','disabled');
//使按钮可用:
$('#del_submit').removeAttr('disabled');