第1021天:js 复选框与input输入框相互传值判断

星期一 多云转晴 3~11℃

js 复选框与input输入框相互传值判断

  • js 复选框传值给input输入框

<script type="text/javascript">
function checkTag(){
 var perTag = document.getElementsByName("perTag");
 var selectTag="";
 for(var i=0; i<perTag.length; i++){
  if(perTag[i].checked){
   //alert(perTag[i].value);//取选中的值
   selectTag = selectTag + perTag[i].value + " ";
  }
 }
 document.getElementById("tag").value = selectTag;
}
</script>

<label><input type="checkbox" name="perTag" onclick="checkTag()" value="test1" />test1</label>
<label><input type="checkbox" name="perTag" onclick="checkTag()" value="test2" />test2</label>
<label><input type="checkbox" name="perTag" onclick="checkTag()" value="test3" />test3</label>
<label><input type="checkbox" name="perTag" onclick="checkTag()" value="test4" />test4</label>
<label><input type="checkbox" name="perTag" onclick="checkTag()" value="test5" />test5</label>
<label><input type="checkbox" name="perTag" onclick="checkTag()" value="test6" />test6</label>

<input type="text" id="tag" style="width:500px" />

参考:http://hi.BAIDU.com/ylulu7781618/blog/item/bfe381c46c4db6cc38db494f.html

  • 通过判断输入框的值是否含有某复选框的值,在页面加载时勾选该复选框(Ryan 教的方法,使用split):

<label><input type="checkbox" name="perTag" value="test1" />test1</label>
<label><input type="checkbox" name="perTag" value="test2" />test2</label>
<label><input type="checkbox" name="perTag" value="test3" />test3</label>

<input type="text" id="tag" style="width:500px" value="test1 test2" />

<script type="text/javascript">
function checkedT(){
 var perTag = document.getElementsByName("perTag");
 var strArray = document.getElementById("tag").value.split(" ");
 for(var i=0; i<perTag.length; i++){
  for(var j=0; j<strArray.length; j++){
   if(perTag[i].value == strArray[j]){
    perTag[i].checked = "checked";
   }
  }
 }
}
checkedT();
</script>


友吧今天

嵌套场馆分享页。处理:用户分享场馆时复选tag。

RSS

上一篇:

下一篇:

发表评论

电子邮件地址不会被公开。 必填项已用*标注