( ´_ゝ`)φ 寫寫程式、做做筆記！！！: JQuery

顯示具有 JQuery 標籤的文章。顯示所有文章

2014年5月21日

jQuery Checkbox 全選及設定打勾方式

==================== HTML =======================

//假設有五個 Checkbox ， name 都設定為「my_checkbox」
<input id="Checkbox1" name="my_checkbox" type="checkbox" />
<input id="Checkbox2" name="my_checkbox" type="checkbox" />
<input id="Checkbox3" name="my_checkbox" type="checkbox" />
<input id="Checkbox4" name="my_checkbox" type="checkbox" />
<input id="Checkbox5" name="my_checkbox" type="checkbox" />

==================== .js =======================

//讓所有 Checkbox 打勾的方式
$("input[name='my_checkbox']").each(function () {
  $(this).prop("checked", true); //如果希望為未勾選，將 true 改為 false
});

//單一 Checkbox 打勾的方式
$('[id$=Checkbox' + index + ']').prop("checked", true);

jQuery checkbox 判斷是否被勾選

=================== HTML ===========================

<input id="chkEngLocation" name="" type="checkbox" value="" />

=================== javascript ==========================

var v = $("input[id='chkEngLocation']").is(":checked");
if (v) {

}

2014年5月5日

使用 JQuery 的 ajax 建立 select 清單以及如何在 onchange 事件時，取得value及text值

如何利用 ASP.NET 的 ashx 建立 select 下拉式選單(如下圖)，我利用了 JQuery 做了一個可以取得 Json 並放入 select 的範例

HTML select 清單

==================== <head> =============================

<!-- 使用 JQuery 需加入 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

==================== <body> =============================

<select id="select" class="styled-select" onchange = "onSelectTown()" ></select>

==================== <javascript> =============================

jQuery.support.cors = true;
$.ajax({
   url: 'http://' + window.location.host + '/您的ashp名稱路徑.ashx',
   type: "GET",
   dataType: 'text',
   success: function (msg) {
     var jsonObj = JSON.parse(msg);

     //放入一筆空白的清單
     $("[id$=select]").append($("<option></option>").attr("value", "").text(""));

     for (var i = 0; i < jsonObj.length; i++) {

     //將取得的Json一筆一筆放入清單
     $("[id$=select]").append($("<option></option>").attr("value", jsonObj[i].LAND_ID).text(jsonObj[i].LAND_NAME));
     }
   },
   error: function (xhr, ajaxOptions, thrownError) {
     alert(xhr.status);
   }
});

==================== <javascript> =============================

   //當選擇了行政區
   function onSelectTown() {
     var sel_text = $("[id$=select]").find("option:selected").text()
     var sel_val = $("[id$=select]").val();
     alert(sel_text); //可以取得 select.text
     alert(sel_val);  //可以取得 select.value
   }