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

 

一、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');