jquery操作表单，包括常用的radio,checkbox,select

最新推荐文章于 2018-05-07 21:38:24 发布

sysggg

最新推荐文章于 2018-05-07 21:38:24 发布

阅读量1.2k

点赞数

分类专栏： jQuery 文章标签： jquery input button function filter action

本文链接：https://blog.csdn.net/sysggg/article/details/5996167

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近开发项目时，需要用jquery来取代js，没办法只能去研究了下。现在项目做完了，稍微整理一下，以备交流。

如果大家看着不方便可以直接在我空间下载，里面有js和jsp。另外说一声，我用的是jQuery1.4。

本文包括最常用的表单操作方法，input,password,textarea,radio,checkbox,select的取值，赋值，清空。

需要注意的就是checkbox的全选，反选，设置选中值,select赋值可以根据value值，也可以根据文本text属性值.

Jsp代码：

<body>
    <div id="div1">
    text1:<input type="text" name="text1" id="text1" value="text1"><br>
    password1:<input type="password" name="password1" id="password1"><br>

    <textarea rows="" cols="" id="textarea1">textOri</textarea><br>

  <input type="radio" id="radio1" name="radioGroup" value="radio1">radio1Content
  <input type="radio" id="radio2" name="radioGroup" value="radio2">radio2Content<br>


  <input type="checkbox" name="checkbox1" id="checkbox1" value="checkbox1">Apple
  <input type="checkbox" name="checkbox1" id="checkbox3" value="checkbox2">oringe
  <input type="checkbox" name="checkbox1" id="checkbox2" value="checkbox3">bear
  <input type="checkbox" name="checkbox1" id="checkbox4" value="checkbox4">banana
  <input type="button" value="反选" οnclick="reverse();">
  <br>

  <select name="selectName" id="select1">
   <option value="">--please select--</option>
   <option value="1">11</option>
   <option value="2">22</option>
   <option value="3">33</option>
  </select>
  <input type="button" value="获取选中的文本" οnclick="getSelectedText();">
  <input type="button" value="通过文本设置下拉的选中" οnclick="setSelectedByText();">
  <br>

  <form name="form1" id="form1" action="">
   <input type="button" value="获取数据" οnclick="getDate();">
   <input type="button" value="赋值" οnclick="setDate();">
   <input type="button" value="清空" οnclick="clearDate();">
  </form>
    </div>
</body>

JQuery代码：

function getDate(){

/*
* 获取值
*/
var textValue=$("#text1").val();
var passValue=$("#password1").val();
var textAreaValue=$("#textarea1").val();
var radioValue=$("input[name='radioGroup']:checked").val();
var checkBoxValue=$("input[name='checkbox1']:checked").val();
var selectValue=$("#select1").val();

alert("textValue: "+textValue);
alert("passValue: "+passValue);
alert("textAreaValue: "+textAreaValue);
alert("radioValue: "+radioValue);
var checkValue='';
$("input[name='checkbox1']:checked").each(function(i){
checkValue+=$(this).val()+",";
})
alert(checkValue);
alert("selectValue: "+selectValue);
}

/*
* 赋值
*/

/*
* 清空数据
*/
function clearDate(){
$("#text1").val("");
$("#password1").val("");
$("#textarea1").val("");

//取消单选按钮选中 //注意这里会检索页面中所有的radio。
$(":radio[checked='true']").attr("checked","");

//如果只想操作指定的单选按钮组，则可以使用name属性。

$(":radio[name='filter_zcfl']").attr("checked","");

//取消复选框选中,这样就不用each方法遍历了。
$(":checkbox[checked='true']").attr("checked","");

//设置下拉选中
$("#select1").val("");
}

/*
* 设置多选框反选
*/
function reverse(){
$("input[name='checkbox1']").each(function(i){
if($(this).attr("checked")==true){$(this).attr("checked","")}
else{$(this).attr("checked",true)}
})
}

/*
* 获取选中的下拉文本
*/
function getSelectedText(){
var selectedText = $("#select1").find("option:selected").text();
alert(selectedText);
}

/*
* 通过文本来设置选中的下拉
*/
function setSelectedByText(){
//让用户输入想要选中的下拉的text值
var inputText = prompt("Please input selected text:","0");
//遍历该下拉下的option
$("#select1 > option").each(function(i){
  //如果option的text属性和用户输入的值相等，则让他选中
  //否则给一个默认值，该默认值是“--请选择--”的value值。
  if($(this).text()==inputText){
   $(this).attr("selected",true);
  }else{
   $(this).val("");
  }
})
}

sysggg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery操作表单，包括常用的radio,checkbox,select

最近开发项目时，需要用jquery来取代js，没办法只能去研究了下。现在项目做完了，稍微整理一下，以备交流。如果大家看着不方便可以直接在我空间下载，里面有js和jsp。另外说一声，我用的是jQuery1.4。本文包括最常用的表单操作方法，input,password,textarea,radio,checkbox,select的取值，赋值，清空。需要注意的就是checkbox的全选，反选，设置选中值,select赋值可以根据value值，也可以根据文本text属性值.Jsp代码： text1:
复制链接

扫一扫