jQuery操作下拉列表以及單選多選框
阿新 • • 發佈：2017-09-12
width http 數組 ini init 獲取多選框的值 asc cli 添加
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> </head> <body> <center> <!--文本框--> 用戶名:<input type="text" name="username" id="username" value="初始值" /> <br /> <br /> <!--下拉列表--> 部門: <select name="unit" id="unit" style="width: 200px;"> <option value="0"selected>--請選擇--</option> <option value="1">部門1</option> <option value="2">部門2</option> </select><br /> <!--多選框--> 愛好: <input type="checkbox" name="aihao" id="" value="0" checked="checked" />籃球 <input type="checkbox" name="aihao" id="" value="1" checked="checked" />足球 <input type="checkbox" name="aihao" id="" value="2" />羽毛球 <input type="checkbox" name="aihao" id="" value="3" />乒乓球 <br /> <!--單選框--> 性別: <input type="radio" name="gender" id="" value="0" checked="checked" />男 <input type="radio" name="gender" id="" value="1" />女 <br /> <br /> <input type="button" id="" value="改變文本值" onclick="initText()" /> <input type="button" id="" value="改變下拉列表值" onclick="changeSelect()" /> <input type="button" id="" value="改變多選框值" onclick="changeCheckbox()" /> <input type="button" id="" value="改變單選框值" onclick="changeRadio()" /> <input type="button" id="" value="動態添加一個給下拉列表" onclick="addSelect()" /> <script type="text/javascript"> /*讀取與改變文本框值*/ function initText() { alert($("#username").val()); $("#username").val("這是改變後的值"); } /*讀取與改變下拉列表值*/ function changeSelect() { alert("選的值是" + $("#unit option:selected").val() + ",文本是:" + $("#unit option:selected").text()); $("#unit").val("2"); } function changeCheckbox() { /*獲取多選框的值*/ // $aihaos是一個數組 var $aihaos = $("[name=‘aihao‘][checked]"); alert("多選框選中個數:" + $aihaos.length); for(var i = 0; i < $aihaos.length; i++) { var value = $($aihaos[i]).val(); alert(value); } /*設置為不選中狀態*/ $($aihaos).attr("checked", false); //設置其中一個為選中狀態 $("[name=‘aihao‘] :eq(2)").attr("checked", ‘checked‘); } function changeRadio() { /*獲取單選框的值*/ // $aihaos是一個數組 var $aihaos = $("[type=‘radio‘][checked]"); alert("多選框選中個數:" + $aihaos.length); for(var i = 0; i < $aihaos.length; i++) { var value = $($aihaos[i]).val(); alert(value); } //設改變單選框的值 $("[type=‘radio‘] :eq(1)").attr("checked", ‘checked‘); } //動態給下拉列表增加選項 function addSelect() { var $unit = $("[name=‘unit‘]"); alert("多選框選中個數:" + $unit.length); $unit.append("<option value=‘3‘>部門3</option>"); $("<option value=‘4‘>部門4</option>").appendTo($unit); } </script> </center> </body> </html>
更多具體的可以參考:http://www.cnblogs.com/qlqwjy/p/7511814.html
jQuery操作下拉列表以及單選多選框