jQuery表单选择器示例

最新推荐文章于 2023-04-23 17:34:04 发布

cyan20115

最新推荐文章于 2023-04-23 17:34:04 发布

阅读量404

点赞数

文章标签： javascript ViewUI

jQuery带有许多表单选择器，可以更轻松，更有效地访问表单元素。这是一个简单的jQuery表单选择器参考。

1.文本框– $（'input：text'）

选择文本框

$('input:text');

获取文本框值

$('input:text').val();

设置文本框值

$('input:text').val("New Text");

2.密码– $（'input：password'）

选择密码

$('input:password');

获取密码值

$('input:password').val();

设置密码值

$('input:text').val("New Text");

3. Textarea – $（'textarea'）

选择文本区域

$('textarea');

获取textarea值

$('textarea').val();

设置textarea值

$('textarea').val("New Text in Textarea");

4.单选按钮– $（'input：radio'）

选择单选按钮

$('input:radio');

获取选定的单选按钮选项

$('input:radio[name=radiobutton-name]:checked').val();

选择第一个单选按钮选项

$('input:radio[name=radiobutton-name]:nth(0)').attr('checked',true);
or
$('input:radio[name=radiobutton-name]')[0].checked = true;

更多详情…

5.复选框-$（'input：checkbox'）

选择一个复选框

$('input:checkbox');

检查是否已选中复选框

$('input:checkbox[name=checkboxname]').is(':checked');

选中复选框

$('input:checkbox[name=checkboxname]').attr('checked',true);

取消选中复选框

$('input:checkbox[name=checkboxname]').attr('checked',false);

更多详情…

6.上传文件– $（'input：file'）

选择文件

$('input:file');

获取文件值

$('input:file').val();

7.隐藏值– $（'input：hidden'）

选择隐藏值

$('input:hidden');

获得隐藏的价值

$('input:hidden').val();

设置隐藏值

$('input:hidden').val("New Text");

8.选择（下拉框）– $（'选择'）

选择下拉框

$('select')
or
$('#dropdown-id')

获取选定的下拉框值

$('#dropdown-id').val();

要将下拉框的值设置为“中国”

$("#dropdown-id").val("China");

更多细节…

9.提交按钮– $（'input：submit'）

选择提交按钮

$('input:submit');

10.重置按钮– $（'input：reset'）

选择重置按钮

$('input:reset');

jQuery表单选择器

<html>
<head>
<title>jQuery form selector example</title>
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
	div{
		padding:16px;
	}
</style>
</head>

<body>

<h1>jQuery form selector example</h1>

<h2>Message = <label id="msg"></label></h2>

<form name="testing" action="#">
  <div>
	TextBox : <input type="textbox" value="This is message from textbox" />
  </div>
  <div>
	Password : <input type="password" value="This is message from password" />
  </div>
  <div>
	TextArea : <textarea>This is message from textarea</textarea>
  </div>
  <div>
	Radio : <input name="sex" type="radio" value="Male" checked>Male</input>
	        <input name="sex" type="radio" value="Female">Female</input>
  </div>
  <div>
	CheckBox : <input type="checkbox" name="checkme">Check Me</input>
  </div>
  <div>
	File : <input type="file"></input>
  </div>
  <div>
	Hidden : <input type="hidden" value="This is message from hidden"/>
  </div>
  <div>
	Country : <select id="country">
			<option value="China">China</option>
			<option value="United State">United State</option>
		     </select>
  </div>
  <div>
	<input type="submit"></input> <input type="reset"></input>
  </div>	
</form>

<button id="text">input:text</button>
<button id="password">input:password</button>
<button id="textarea">textarea</button>
<button id="radio">input:radio</button>
<button id="checkbox">input:checkbox</button>
<button id="file">input:file</button>
<button id="hidden">input:hidden</button>
<button id="select">select</button>
<button id="submit">input:submit</button>
<button id="reset">input:reset</button>

<script type="text/javascript">
    $("#text, #password, #hidden, 
          #textarea, #file, #submit, #reset").click(function () {
	  var str = $(this).text();
	  $('input, textarea, select').css("background", "#ffffff");
	  $(str).css("background", "#ff0000");
	  $('#msg').html($(str).val())
    });
	
    $("#radio").click(function () {
	  $('input, textarea, select').css("background", "#ffffff");
	  $('#msg').html($('input:radio[name=sex]:checked').val());
    });
	
    $("#checkbox").click(function () {
	  var str = $(this).text();
	  $('input, textarea, select').css("background", "#ffffff");
	  
	  if($('input:checkbox[name=checkme]').is(':checked')){
	  	$('#msg').html("Checkbox is checked");
	  }else{
	  	$('#msg').html("Checkbox is uncheck");
	  }	  
    });
	
    $("#select").click(function () {
	  $('input, textarea, select').css("background", "#ffffff");
	  $('#msg').html($('#country').val());
    });
	
</script>

</body>
</html>

试试演示

标签： jQuery jQuery选择器

翻译自: https://mkyong.com/jquery/jquery-form-selectors-example/

cyan20115

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery表单选择器示例

jQuery带有许多表单选择器，可以更轻松，更有效地访问表单元素。这是一个简单的jQuery表单选择器参考。 1.文本框– $（'input：text'）选择文本框 $('input:text'); 获取文本框值 $('input:text').val(); 设置文本框值 $('input:text').val("New Text"); 2.密码– $（'i...
复制链接

扫一扫