实际做项目时遇到的效果,以后也可能会遇到,先记下来。
效果描述:一个文本框,后面的若干复选框选项,当选项补勾选,其值会加入到文本框中,不勾选,则其值会从文本框中删除。js代码用到了数组的相关知识,插入和删除数组。具体代码如下:
html:
<input type="text" value="" class="input1">
<div class="checks">
<input type="checkbox" id="check_1"><label for="check_1">省1</label>
<input type="checkbox" id="check_2"><label for="check_2">省2</label>
<input type="checkbox" id="check_3"><label for="check_3">省3</label>
<input type="checkbox" id="check_4"><label for="check_4">省4</label>
<input type="checkbox" id="check_5"><label for="check_5">省5</label>
<input type="checkbox" id="check_6"><label for="check_6">省6</label>
<input type="checkbox" id="check_7"><label for="check_7">省7</label>
<input type="checkbox" id="check_8"><label for="check_8">省8</label>
</div>
js:
<script>
$(document).ready(function(){
var input1=$(".input1");
var input2=$(".checks input");
var arrayObj=new Array();
//删除数组中指定的值
function removeByValue(arr,val){
for(var i=0;i<arr.length;i++){
if(arr[i]==val){
arr.splice(i,1);
break;
}
}
}
input2.each(function(){
$(this).click(function(){
var text1=$(this).next("label").html();
if($(this).prop("checked")==true){
arrayObj.push(text1);
input1.prop("value",arrayObj);
}
if($(this).prop("checked")==false){
removeByValue(arrayObj,text1);
input1.prop("value",arrayObj);
}
});
});
});
</script>
当然了,里面每个复选框的id也可以用js来添加,另一篇博客中会写到这个知识点。
效果预览:http://www.gbtags.com/gb/rtreplayerpreview-standalone/2916.htm