一：chenckbox的單選 初始 傳值 前臺動態添加： 1：定義隱藏控件 保存傳值 <input type="hidden" id="blockradios" name="blockradios" value=" <%=Model.BlockIdentification %>" /> 2： <% foreach (SYS_PARAMETER_VALUE item in (List<SYS_PARAMETER_VALUE>)ViewData["blockindentify"]){%><input type="checkbox" name="blockradio" style="width: 20px; border-style: none;" value="<%=item.PARA_VALUE_NAME %>" οnclick="check(this)" /><%=item.PARA_VALUE_NAME %><%} %>3：click事件 實現單選//控制樓盤事件是單選function check(obj) {// debugger;var checks = document.getElementsByName("blockradio");if (obj.checked) {for (var i = 0; i < checks.length; i++) {checks[i].checked = false;}obj.checked = true;} else {for (var i = 0; i < checks.length; i++) {checks[i].checked = false;}}} 4：把值提交的腳本var flag = false;var blockradio = document.getElementsByName("blockradio");//必須選擇要添加的樓盤標識for (var i = 0; i < blockradio.length; i++) {if (blockradio[i].checked) {flag = true;//blockradio.value = blockradio[i].value;var blockradios = document.getElementById("blockradios");blockradios.value = blockradio[i].value;}}if (!flag) {alert("請選擇樓盤標識");return false;}5：傳值成功之后 初始化數據//初始化樓盤標識一var blockradios = document.getElementById("blockradios");$("input[type=checkbox][name=blockradio]").each(function () {if ($(this).val() == blockradios.value.trim()) {$(this).attr("checked", true);}});//初始化樓盤標識二 也適用于對radiobutton的初始化/*var blockradio = document.getElementsByName("blockradio");for (var i = 0; i < blockradio.length; i++) {if (blockradio[i].value.trim() == blockradios.value.trim()) {blockradio[i].checked = true;}}*/二：動態的添加和刪除表格里面的tr原始數據 ： <table id="newtable"><tr><td width="18px;"><input class="jjr_xz" name="fxk" type="checkbox" value="" data-role="none"/></td><td class="xxsn" align="right">客¨a戶?ì姓?名??</td><td><div class="xdjdh"><input required placeholder="請?輸o?入¨?真?實o|ì姓?名?" class="yy_int" name="cusName" type="text" data-role="none"/></div></td></tr><tr><td> </td><td class="xxsn" align="right">手o?機¨2號?碼??</td><td><input pattern="[0-9]{11}" placeholder="請?輸o?入¨?11位?手o?機¨2號?" class="yy_int" name="cusPhone" type="tel" data-role="none"/></td></tr> </table>1：點擊動態添加tr的方法/*追加客戶function addcustomer() {if ($("input[type='checkbox'][name='fxk']").length >= 5) {alert("最多只能添加5條推薦信息?");return false;}var newhtml = '<tr><td width="18px;"><input class="jjr_xz" name="fxk" type="checkbox" value="" data-role=\"none\"/></td>';newhtml += "<td class='xxsn' align='right'>客戶姓名?</td>";newhtml += "<td><div class='xdjdh'><input required placeholder='請輸入客戶姓名?' class='yy_int' name='cusName'type='text' data-role=\"none\"/>";newhtml += "</div></td></tr>";newhtml += " <tr><td> </td><td class='xxsn' align='right'>手機號碼??</td>";newhtml += " <td><input pattern='[0-9]{11}' placeholder='請輸入手機號 class='yy_int' name='cusPhone' type='tel' data-role=\"none\"/></td></tr>";$("#newtable").append(newhtml); ///表示在表格里面追加內容}2：點擊刪除行/*移除勾選的客戶信息function deletecustomer() {if ($("input[type='checkbox'][name='fxk']:checked").length == 0) {alert("請選擇一族要刪除的數據?");return false;}if ($("input[type='checkbox']:checked").length >= $("input[type='checkbox']").length) {alert("提示：不可全部刪除數據 至少留一條?");return false;}$("#newtable").each(function () {$("input[type='checkbox']:checked").each(function () {$(this).parent().parent().next().eq(0).remove(); //先移除一行 在移除本行$(this).parent().parent().remove();//$(this).closest('tr').remove(); //清?空?當ì?à前??行D});});}3：保存驗證function save_customers() {var cusNames = "";var cusPhones = "";/*循環驗證客戶姓名*/var checkInfo = true;var msgNames = "";var msgPhone = "";$("input[type='text'][name='cusName']").each(function () {var cusName = $(this).val();var index = $("input[type='text'][name='cusName']").index($(this)) + 1;if (empty(cusName)) {msgNames += "第ì¨2" + index + "個客戶姓名不可為空?！ê?\r\n";}else {cusNames = cusNames + cusName + ',';}});/*循環驗證手機號碼*/$("input[type='tel'][name='cusPhone']").each(function () {var cusPhone = $(this).val();var index = $("input[type='tel'][name='cusPhone']").index($(this)) + 1;if (empty(cusPhone)) {msgNames += "第ì¨2" + index + "個客戶手機號不可為空?！ê?\r\n";}else {var checkMob = /^(1[0-9])\d{9}$/; //手機號碼檢測aif ($.trim(cusPhone).length != 11) {msgNames += "第ì¨2" + index + "個?客戶手機號要為11位！ê?\r\n"}else if (!checkMob.test($.trim(cusPhone))) {msgNames += "第ì¨2" + index + "個客戶手機號輸入有誤，請重新輸入?！ê?\r\n"}else {//重復收據if (cusPhones.indexOf(cusPhone) >= 0) {msgNames += "第ì¨2" + index + "個客戶手機號與上面¨?！ê?\r\n";}else {cusPhones = cusPhones + cusPhone + ',';}}}});if (msgNames != "") {alert(msgNames);return false;}else{var Request = new Object();Request = GetRequest();var blockId = decodeURI(Request["blockId"]);changePage('tuijiangf.html?cusNames=' + cusNames + '&cusPhones=' + cusPhones + "&blockId=" + blockId);}}html中 id 和 name 的區別 id與Name的主要用途 id的用途id就是Client端HTML元素的Identity（標記），主要是在客戶端腳本里用。 name的用途name主要是用于獲取提交表單的某表單域信息。在form里面，如果不指定Name，就不會發送到服務器端。input、select、form、 frame、iframe等元素用name。表單元素(form、input、textarea、select)與框架元素(iframe、frame) 用name，這些元素都與表單(框架元素作用于form的target)提交有關，在表單的接收頁面只接收有name的元素, 賦ID的元素通過表單是接收不到值的。我們可以在服務器端根據其Name通過Request.Params取得元素提交的值。 HTML元素Input type='radio'分組，我們知道radio button控件在同一個分組類，check操作是mutex的，同一時間只能選中一個radio，這個分組就是根據相同的Name屬性來實現的。 建立頁面中的錨點，我們知道link是獲得一個頁面超級鏈接，如果不用href屬性，而改用Name，我們就獲得了一個頁面錨點。作為對象的 Identity，如Applet、Object、Embed等元素。比如在Applet對象實例中，我們將使用其Name來引用該對象。在IMG元素和 MAP元素之間關聯的時候，如果要定義IMG的熱點區域，需要使用其屬性usemap，使usemap="#name"(被關聯的MAP元素的 Name)。 某些特定元素的屬性，如attribute，和param。例如為Object定義參數。 通過上面的討論我們可以知道id和name更本就是不同作用的東西。 HTML、CSS里面關于id、class、name屬性的區別 name和id name原來是為了標識之用，但是現在根據規范，都建議用id來標識元素。 以下只能用name： 表單（form）的控件名，提交的數據都用控件的name而不是id來控制。因為許多時候一個name會同時對應多個控件，比如checkbox和 radio，而id必須是全文檔中唯一的。此外瀏覽器會根據name來設定發送到服務器的request。因此如果用id，服務器是無法得到數據的。 frame和window的名字，用于在其他frame或window指定target。 以下只能用id： label與form控件的關聯 如<label for="MyInput">My Input</label><input id="MyInput" type="text"> for屬性指定與label關聯的元素的id，不可用name替代。 CSS的元素選擇機制，以#MyId的方式指定應用樣式的元素，不能用name替代。 腳本中獲得對象： IE支持在腳本中直接以id（而不是name）引用該id標識的對象。例如上面的input，要在腳本中獲得輸入的內容，可以直接以 MyInput.value來獲得。如果用DOM的話，則用document.getElementById("MyInput").value，如果要 用name的話，通常先得到包含控件的form，例如document.forms[0]，然后從form再引用name，注意這樣得到的是經過計算后將 發送給服務器的值。 name與id的其他區別是：id要符合標識的要求，比如大小寫敏感，最好不要包含下劃線（因為不兼容CSS）。而name基本上沒有什么要求，甚至可以 用數字。table、tr、td、div、p、span、h1、li等元素一般用id。與表單相關的元素也可以賦ID值, 但為這些元素賦ID值的時候引用這些元素的方法就要變一下了，具體的如下： 賦name時引用元素的方式: document.formName.inputName或document.frames("frameName") 賦id時引用元素的方式: document.all.inputID或document.all.frameID 除去與表單相關的元素，只能賦id不能賦name，這些元素有body、li、a、table、tr、td、th、p、div、span、pre、dl、dt、dd、font、b等等 class和id在一個HTML網頁中,id是唯一的,即只有某一個標簽,或某一個塊的標識符是這個id。class可重復使用，用來根據用戶定義的標準對一個或多個元素 進行標記和定義。實際使用中，class可能對文字的排版等比較有用，而id則對宏觀布局和設計放置各種元素較有用。綜合例子如下： 網頁代碼有 <div id=m_blog><div class=opt><a id=myLink href="xxx"></div> </div> 用CSS控制這個鏈接的停留樣式，可以這樣寫 #m_blog div.opt a:hover{color:#D57813} 或 #myLink:hover{color:#D57813} 關于ID和Name的一些注意事項 當然HTML元素的Name屬性在頁面中也可以起那么一點ID的作用，因為在DHTML對象樹中，我們可以使用document.getElementsByName來獲取一個包含頁面中所有指定Name元素的對象數組。 如果頁面中有n(n>1)個HTML元素的ID都相同了怎么辦？在DHTML對象中怎么引用他們呢？如果我們使用ASPX頁面，這樣的情況是不容易 發生的，因為aspnet進程在處理aspx頁面時根本就不允許有ID非唯一，這是頁面會被拋出異常而不能被正常的render。要是不是動態頁面，我們 硬要讓ID重復那IE怎么搞呢？這個時候我們還是可以繼續使用document.getElementById獲取對象，只不過我們只能獲取ID重復的那 些對象中在HTML Render時第一個出現的對象。而這時重復的ID會在引用時自動變成一個數組，id重復的元素按Render的順序依次存在于數組中。

?

轉載于:https://www.cnblogs.com/gs21Joan/p/3990674.html

總結

以上是生活随笔為你收集整理的一些Jquery操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。