天天看点
返回

jquery 操作复选框 下拉框

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">??
  2. <html xmlns="http://www.w3.org/1999/xhtml">??
  3. <head>??
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />??
  5. <title>louis-blog >> jQuery 瀵?heckbox????浣?</title>??
  6. <script type='text/javascript' src="jquery.js"></script>??
  7. <SCRIPT LANGUAGE="JavaScript">??
  8. <!--??
  9. $("document").ready(function(){??
  10. $("#btn1").click(function(){??
  11. $("[name='checkbox']").attr("checked",'true');//?ㄩ????
  12. })??
  13. $("#btn2").click(function(){??
  14. $("[name='checkbox']").removeAttr("checked");//??娑??ㄩ????
  15. })??
  16. $("#btn3").click(function(){??
  17. $("[name='checkbox']:even").attr("checked",'true');//??涓?????濂??奥??
  18. })??
  19. $("#btn4").click(function(){??
  20. $("[name='checkbox']").each(function(){//??????
  21. if($(this).attr("checked")){??
  22. $(this).removeAttr("checked");??
  23. }??
  24. else{??
  25. $(this).attr("checked",'true');??
  26. }??
  27. })??
  28. })??
  29. $("#btn5").click(function(){//杈??洪??涓????悸??
  30. var str="";??
  31. $("[name='checkbox'][checked]").each(function(){??
  32. str+=$(this).val()+"\r\n";??
  33. //alert($(this).val());??
  34. })??
  35. alert(str);??
  36. })??
  37. })??
  38. -->??
  39. </SCRIPT>??
  40. </HEAD>??
  41. <body style="text-align:center;margin: 0 auto;font-size: 12px;">??
  42. <div style="border: 1px solid #999; width: 500px; padding: 15px; background: #eee; margin-top: 150px;">??
  43. <form name="form1" method="post" action="">??
  44. <input type="button" id="btn1" value="?ㄩ??">??
  45. <input type="button" id="btn2" value="??娑??ㄩ??">??
  46. <input type="button" id="btn3" value="??涓?????濂???>??
  47. <input type="button" id="btn4" value="????">??
  48. <input type="button" id="btn5" value="?峰???涓?????????>??
  49. <br><br>??
  50. <input type="checkbox" name="checkbox" value="checkbox1">??
  51. checkbox1val??
  52. <input type="checkbox" name="checkbox" value="checkbox2">??
  53. checkbox2val?
  54. <input type="checkbox" name="checkbox" value="checkbox3">??
  55. checkbox3val?
  56. <input type="checkbox" name="checkbox" value="checkbox4">??
  57. checkbox4val??
  58. <input type="checkbox" name="checkbox" value="checkbox5">??
  59. checkbox5val??
  60. <input type="checkbox" name="checkbox" value="checkbox6">??
  61. checkbox6val??
  62. </form>??
  63. </div>??
  64. </body>??
  65. </HTML>?

1,涓???妗?:

var cc1?? = $(".formc select[@name='country'] option[@selected]").text(); //寰??颁???????????涓?椤圭??????(娉ㄦ??涓??存??绌烘??

var cc2 = $('.formc select[@name="country"]').val();?? //寰??颁???????????涓?椤圭????

var cc3 = $('.formc select[@name="country"]').attr("id"); //寰??颁???????????涓?椤圭??ID灞??у??

$("#select").empty();//娓?绌轰???妗?//$("#select").html('');

$("<option value='1'>1111</option>").appendTo("#select")//娣诲??涓???妗???option

绋?寰?瑙ｉ??涓?涓?:

1.select[@name='country'] option[@selected] 琛ㄧず?锋??name 灞??э?

骞朵?璇ュ??у?间负'country' ??select??绱? ???㈢???锋??selected 灞??х??option ??绱?锛?

??浠ョ???烘??@寮?澶寸??灏辫〃绀哄???㈣?????灞??с??

2,????妗?:

$("input[@type=radio][@checked]").val();?? //寰??板????妗?????涓?椤圭????娉ㄦ??涓??存病??绌烘??

$("input[@type=radio][@value=2]").attr("checked",'checked'); //璁剧疆????妗?value=2??涓洪??涓??舵??.(娉ㄦ??涓??存病??绌烘??

3,澶???妗?:

$("input[@type=checkbox][@checked]").val(); //寰??板???妗?????涓???绗?涓?椤圭????

$("input[@type=checkbox][@checked]").each(function(){ //?变?澶???妗?涓?????涓?????澶?涓?,??浠ュ??浠ュ惊??杈???

?? alert($(this).val());

?? });

$("#chk1").attr("checked",'');//涓?????

$("#chk2").attr("checked",true);//????

if($("#chk1").attr('checked')==true){} //?ゆ??????凡缁?????

褰???query?????╁?ㄦ??寮哄ぇ??. 杩???寰?澶??规?.

???????宸变???杩?涓?涓?jquery??澶???妗?灏???浠??垮????浠ュ????????.

http://www.cssrain.cn/demo/jquery-check/checkbox.html

<script src="jquery-1.2.1.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function(){

$("#selectTest").change(function()

{

?????? //alert("Hello");

?????? //alert($("#selectTest").attr("name"));

?????? //$("a").attr("href","xx.html");

?????? //window.location.href="xx.html" target="_blank" rel="external nofollow" ;

?????? //alert($("#selectTest").val());

?????? alert($("#selectTest option[@selected]").text());

?????? $("#selectTest").attr("value", "2");

});

});

</script>

<a href="#" target="_blank" rel="external nofollow" >aaass</a>

<!--涓???妗?-->

<select id="selectTest" name="selectTest">

<option value="1">11</option>

<option value="2">22</option>

<option value="3">33</option>

<option value="4">44</option>

<option value="5">55</option>

<option value="6">66</option>

</select>

jquery radio???硷?checkbox???硷?select???硷?radio??涓?锛?checkbox??涓?锛?select??涓?锛????剁?稿???峰??涓?缁?radio琚???涓?椤圭????

var item = $('input[@name=items][@checked]').val();

?峰??select琚???涓?椤圭??????

var item = $("select[@name=items] option[@selected]").text();

select涓???妗???绗?浜?涓???绱?涓哄?????涓???

$('#select_id')[0].selectedIndex = 1;

radio????缁???绗?浜?涓???绱?涓哄?????涓???

$('input[@name=items]').get(1).checked = true;

?峰???硷?

????妗?锛??????哄??锛?$("#txt").attr("value")锛?

澶???妗?checkbox锛?$("#checkbox_id").attr("value")锛?

????缁?radio锛? $("input[@type=radio][@checked]").val();

澶?缁?????????锛?$("input[@typ=radio][@name=''][@checked]")

涓???妗?select锛? $('#sel').val();

?у?惰〃????绱?锛?

????妗?锛??????哄??锛?$("#txt").attr("value",'');//娓?绌哄??瀹?

??????????????? $("#txt").attr("value",'11');//濉?????瀹?

澶???妗?checkbox锛? $("#chk1").attr("checked",'');//涓?????

??????????????? $("#chk2").attr("checked",true);//????

??????????????? if($("#chk1").attr('checked')==undefined) //?ゆ??????凡缁?????

????缁?radio锛? $("input[@type=radio]").attr("checked",'2');//璁剧疆value=2??椤圭??涓哄?????涓?椤?

涓???妗?select锛? $("#sel").attr("value",'-sel3');//璁剧疆value=-sel3??椤圭??涓哄?????涓?椤?

??????????? $("<optionvalue='1'>1111</option><optionvalue='2'> 2222</option>").appendTo("#sel")//娣诲??涓???妗???option

??????????? $("#sel").empty()锛?//娓?绌轰???妗?

?峰??涓?缁?radio琚???涓?椤圭????

var item = $('input[@name=items][@checked]').val();

?峰??select琚???涓?椤圭??????

var item = $("select[@name=items] option[@selected]").text();

select涓???妗???绗?浜?涓???绱?涓哄?????涓???

$('#select_id')[0].selectedIndex = 1;

radio????缁???绗?浜?涓???绱?涓哄?????涓???

$('input[@name=items]').get(1).checked = true;

?峰???硷?

????妗?锛??????哄??锛?$("#txt").attr("value")锛?

澶???妗?checkbox锛?$("#checkbox_id").attr("value")锛?

????缁?radio锛? $("input[@type=radio][@checked]").val();

涓???妗?select锛? $('#sel').val();

?у?惰〃????绱?锛?

????妗?锛??????哄??锛?$("#txt").attr("value",'');//娓?绌哄??瀹?

$("#txt").attr("value",'11');//濉?????瀹?

澶???妗?checkbox锛? $("#chk1").attr("checked",'');//涓?????

$("#chk2").attr("checked",true);//????

if($("#chk1").attr('checked')==undefined) //?ゆ??????凡缁?????

????缁?radio锛? $("input[@type=radio]").attr("checked",'2');//璁剧疆value=2??椤圭??涓哄?????涓?椤?

涓???妗?select锛? $("#sel").attr("value",'-sel3');//璁剧疆value=-sel3??椤圭??涓哄?????涓?椤?

$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//娣诲??涓???妗???option

$("#sel").empty()锛?//娓?绌轰???妗?

杞?杞戒?:https://www.cnblogs.com/YuanShuai/archive/2012/02/27/2370044.html

xhtml javascript
上一篇: 复选框、下拉框
下一篇: 模拟select下拉框、复选框效果

继续阅读