亚洲一区影音先锋色资源,天海冀一二三区,色综合网天天综合色中文男男

JQuery下拉框與復(fù)選框

2011.08.21

1.

先看下一個(gè)例子：

首先是一個(gè)下拉框

<table width="50%">
<tr>
    <td >選擇資源類型：</td>
<td id="changeContent">HTML頁(yè)面</td>
<td>
  <select id="s1">
   <option value="1">HTML頁(yè)面</option>
   <option value="2">下載資源</option>
   <option value="3">超鏈接資源</option>
   <option value="4">自測(cè)題</option>
   <option value="5">課件資源</option>
   <option value="6">問(wèn)卷調(diào)查</option>
   <option value="7">FAQ</option>
   <option value="8">文本及附件</option>
  </select>
</td>
</tr>
</table>

之后，通過(guò)

$(document).ready(function(){

$("#s1").change(function(){
   $("#changeContent").html( $("option[value="+$(this).val()+"]").html() );
      alert($("option[value="+$(this).val()+"]").html());
      //alert($(this).val());
  });

});

以下代碼進(jìn)行下拉框值的獲取。

上文中的 $(this).val() 對(duì)應(yīng)下拉框中的 value

而 $("option[value="+$(this).val()+"]").html() 則是對(duì)應(yīng)value后的內(nèi)容。

2.

   $("select[id=select]").change(function(){
    var newvar = $("select[id=select] option:selected").text();
    $("input[id=input1]").val(newvar);
   });

    $("#showdiv").click(function(){
              alert( "Email:"+ $("#user_name").val()+"@"+$("#input1").val() );
    })

這段代碼表示id為selected的下拉框改變后，會(huì)自動(dòng)取得所選中的值內(nèi)容，并提示出來(lái)。

3.

可以通過(guò)append方法，動(dòng)態(tài)的增加下拉框中的選項(xiàng).

eg:

$(document).ready(function(){
          var i=1;
    $("#editlink").click(function(){
            $("#selectlink").append( "<option value=/"1/">cssrain"+i+"</option>" );
   i++;
    });

});

</script>
<input type="button" id="editlink" value="add options" />
<div id="editlinkdiv">
    <select id="selectlink" name="selectlink">
        <option>add options</option>
    </select>
</div>

其中，append方法直接把需要添加的內(nèi)容添加至下拉框的option選項(xiàng)中。

4.復(fù)選框的全選擇與反選擇等。。。

view plain copy to clipboard print ?

<mce:script type="text/javascript" src="JS/jquery.js" mce_src="JS/jquery.js"></mce:script>
<mce:script type="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($("#form1 input:checked")) {
alert($("#form1 input:checked").val());
}
//強(qiáng)制不提交
return false;
});
//--------------------------------------
$(".btn").click(function(){
$("#divPosType input:checked").each(function(i){
alert($(this).val());
});
});
//--------------------------------------
//復(fù)選框全部選擇
$("#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>
<input type="button" value="test" id="test">
<input type="checkbox" id="a" checked="checked" value="1"/>1
<input type="checkbox" id="b" checked="checked" value="2"/>2
<input type="checkbox" id="c" value="3" onclick="alert(this.value)"/>3
<input type="button" value="測(cè)試沒(méi)有選中的" class="notcheck">
<hr>
<form id="form1">
<input type="radio" name="items" id="item1" value="a"/>A
<br/>
<input type="radio" name="items" id="item2" value="b"/>B
<br/>
<input type="submit" id="btn1">
</form>
<hr>
<input type="button" value="測(cè)試選中的" class="btn">
<div class="inpblk" id="divPosType">
<ul>
<li><input type="checkbox" name="chkJobType" id="chkJobType1" value="1" checked/>全職</li>
<li><input type="checkbox" name="chkJobType" id="chkJobType2" value="2" />兼職</li>
<li><input type="checkbox" name="chkJobType" id="chkJobType3" value="3" checked />臨時(shí)</li>
<li><input type="checkbox" name="chkJobType" id="chkJobType4" value="4" checked />實(shí)習(xí)</li>
</ul>
</div>
<input type="button" id="selectall" name="selectall" value="全部選擇" />
<input type="checkbox" id="checkall" value="1"/>全選
</body>

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

打開(kāi)APP，閱讀全文并永久保存查看更多類似文章

jQuery獲取Radio選擇的Value值:

用Jquery獲取checkbox多個(gè)選項(xiàng)

JQUERY獲取text,areatext,radio,checkbox,select值

Jquery主要控件的取值、賦值，包括textbox,button,lable,radio,checkbox,selected

jQuery設(shè)置value值

jquery判斷一組checkbox中是否至少選中了一個(gè)

更多類似文章 >>

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区