JQuery下拉框与复选框.docx
- 文档编号:4718285
- 上传时间:2022-12-07
- 格式:DOCX
- 页数:6
- 大小:15.57KB
JQuery下拉框与复选框.docx
《JQuery下拉框与复选框.docx》由会员分享,可在线阅读,更多相关《JQuery下拉框与复选框.docx(6页珍藏版)》请在冰豆网上搜索。
JQuery下拉框与复选框
JQuery下拉框与复选框
1.
先看下一个例子:
首先是一个下拉框
<tablewidth="50%">
<tr>
<td>选择资源类型:
</td>
<tdid="changeContent">HTML页面</td>
<td>
<selectid="s1">
<optionvalue="1">HTML页面</option>
<optionvalue="2">下载资源</option>
<optionvalue="3">超链接资源</option>
<optionvalue="4">自测题</option>
<optionvalue="5">课件资源</option>
<optionvalue="6">问卷调查</option>
<optionvalue="7">FAQ</option>
<optionvalue="8">文本及附件</option>
</select>
</td>
</tr>
</table>
之后,通过
$(document).ready(function(){
$("#s1").change(function(){
$("#changeContent").html($("option[value="+$(this).val()+"]").html());
alert($("option[value="+$(this).val()+"]").html());
//alert($(this).val());
});
});
以下代码进行下拉框值的获取。
上文中的$(this).val()对应下拉框中的value
而$("option[value="+$(this).val()+"]").html()则是对应value后的内容。
2.
$("select[id=select]").change(function(){
varnewvar=$("select[id=select]option:
selected").text();
$("input[id=input1]").val(newvar);
});
$("#showdiv").click(function(){
alert("Email:
"+$("#user_name").val()+"@"+$("#input1").val());
})
这段代码表示id为selected的下拉框改变后,会自动取得所选中的值内容,并提示出来。
3.
可以通过append方法,动态的增加下拉框中的选项.
eg:
<scriptlanguage="javascript"type="text/javascript">
$(document).ready(function(){
vari=1;
$("#editlink").click(function(){
$("#selectlink").append("<optionvalue=/"1/">cssrain"+i+"</option>");
i++;
});
});
</script>
<inputtype="button"id="editlink"value="addoptions"/>
<divid="editlinkdiv">
<selectid="selectlink"name="selectlink">
<option>addoptions</option>
</select>
</div>
其中,append方法直接把需要添加的内容添加至下拉框的option选项中。
4.复选框的全选择与反选择等。
。
。
viewplaincopytoclipboardprint?
<mce:
scripttype="text/javascript"src="JS/jquery.js"mce_src="JS/jquery.js"></mce:
script>
<mce:
scripttype="text/javascript"><!
--
$(document).ready(function(){
$("#test").click(function(){
$("input[type*='checkbox']").each(function(i){
if(this.checked){
alert(this.value);
}
});
});
//--------------------------------------
$(".notcheck").click(function(){
$("input[type=checkbox]").not("[checked]").each(function(i){
alert(this.value);
});
});
//--------------------------------------
$("#form1").submit(function(){
if($("#form1input:
checked")){
alert($("#form1input:
checked").val());
}
//强制不提交
returnfalse;
});
//--------------------------------------
$(".btn").click(function(){
$("#divPosTypeinput:
checked").each(function(i){
alert($(this).val());
});
});
//--------------------------------------
//复选框全部选择
$("#selectall").click(function(){
$("input[type=checkbox]").each(function(i){
$(this).attr("checked",true);
});
});
$("#checkall").click(function(){
if(this.checked){
$("input[type=checkbox]").each(function(i){
$(this).attr("checked",true);
});
}else{
$("input[type=checkbox]").each(function(i){
//alert($(this).val());
$(this).attr("checked",false);
});
}
});
});
//--></mce:
script>
<body>
<inputtype="button"value="test"id="test">
<inputtype="checkbox"id="a"checked="checked"value="1"/>1
<inputtype="checkbox"id="b"checked="checked"value="2"/>2
<inputtype="checkbox"id="c"value="3"onclick="alert(this.value)"/>3
<inputtype="button"value="测试没有选中的"class="notcheck">
<hr>
<formid="form1">
<inputtype="radio"name="items"id="item1"value="a"/>A
<br/>
<inputtype="radio"name="items"id="item2"value="b"/>B
<br/>
<inputtype="submit"id="btn1">
</form>
<hr>
<inputtype="button"value="测试选中的"class="btn">
<divclass="inpblk"id="divPosType">
<ul>
<li><inputtype="checkbox"name="chkJobType"id="chkJobType1"value="1"checked/>全职</li>
<li><inputtype="checkbox"name="chkJobType"id="chkJobType2"value="2"/>兼职</li>
<li><inputtype="checkbox"name="chkJobType"id="chkJobType3"value="3"checked/>临时</li>
<li><inputtype="checkbox"name="chkJobType"id="chkJobType4"value="4"checked/>实习</li>
</ul>
</div>
<inputtype="button"id="selectall"name="selectall"value="全部选择"/>
<inputtype="checkbox"id="checkall"value="1"/>全选
</body>
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JQuery 下拉 复选