JQuery实现下拉框的选择 与当CheckBox为服务器控件时如何获取值的操作，实现全选与删除
<script type="text/javascript" defer="defer">
//选择DropDownList中的值并保存在隐藏域中
//选择接等员
function SelectReceptionist()
{
if ($("#<%=ddlSelectReceptionist.ClientID %>").val() != "")
{
$("#<%=hfReceptionist.ClientID %>").val($("#<%= ddlSelectReceptionist.ClientID %>").val());
}
}
//全选
$(function()
{
$("#chkAll").bind("click", function()
{
if ($("#chkAll").attr("checked") == true)
{
$("input[name$='chkClass']").each(function() //("input[name='chkClass']")
{
$(this).attr("checked", true);
});
}
else
{
$("input[name$='chkClass']").each(function()//input[name='chkClass']
{
$(this).attr("checked", false);
});
}
});
});
//保存要安排接待员的班级ID
function ArrangeReceptionist()
{
var texts = "";
//$(":checkbox").each
//$("input[name='chkClass']")
$("input[name$='chkClass']").each(function()
{
if ($(this).attr("checked") == true)
{
//texts += $("span[name='chkClass']").attr("title") + ";";
texts += $(this).parent().attr("title") + ";"; //解决CheckBox为服务器控件的问题,得到父对象的title属性,在下面解释
}
});
if (texts != "")
{
if (confirm("确定要给这些班级安排接待员吗?") == true)
{
var tempClass = texts.substring(0, texts.length - 1);
$("#<%= hfSelectedClass.ClientID %>").val(tempClass);
return true;
}
else
{
return false;
}
}
else
{
alert("请选择要安排的班级");
return false;
}
}
</script>
<table>
<tr class="dataTable2Row">
<td class="dataTable2Text">选择接待员:</td>
<td >
<asp:DropDownList runat="server" ID="ddlSelectReceptionist" CssClass="select2" Width="120px" onchange="SelectReceptionist()" >
</asp:DropDownList>
<asp:HiddenField ID="hfReceptionist" runat="server" />
</td>
</tr>
<tr>
<td valign="top">
<asp:GridView ID="gvClassInfoList" runat="server" Width="100%" AutoGenerateColumns="False" DataKeyNames="ClassID" CssClass="Grid" >
<Columns>
<asp:TemplateField HeaderText="全选">
<HeaderTemplate>
<input ID="chkAll" type="checkbox" name="chkAll" value="全选" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkClass" name="chkClass" title='<%# Eval("ClassID") %>' runat="server" /> //CheckBox为服务器控件
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="班级ID" Visible="False">
<ItemTemplate>
<asp:Label ID="lblClassId" runat="server" Text='<%# Eval("ClassID") %>' Visible="false" ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="CLASSNO" HeaderText="班级代码" SortExpression="IS_REPLY">
<HeaderStyle Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="FROMNO" HeaderText="延续自" ></asp:BoundField>
<asp:BoundField DataField="ATTENDNO" HeaderText="延续至" ></asp:BoundField>
<asp:BoundField DataField="WITHNO" HeaderText="合班" ></asp:BoundField>
<asp:BoundField DataField="Receptionist" HeaderText="接待员" ></asp:BoundField>
<asp:BoundField DataField="PROGRAMNAME" HeaderText="培训项目" />
<asp:BoundField DataField="ItemName" HeaderText="类别 " ></asp:BoundField>
<asp:BoundField DataField="TRAINEENO" HeaderText="总人数" ></asp:BoundField>
<asp:BoundField DataField="STARTDATE" HeaderText="理论开始时间" HtmlEncode=false DataFormatString="{0:yyyy-MM-dd}"></asp:BoundField>
<asp:BoundField DataField="ENDDATE" HeaderText="理论结束时间" HtmlEncode=false DataFormatString="{0:yyyy-MM-dd}"></asp:BoundField>
<asp:BoundField DataField="DAYS" HeaderText="时长" ></asp:BoundField>
<asp:BoundField DataField="WITHNO" HeaderText="合班" ></asp:BoundField>
<asp:TemplateField HeaderText="团组资料">
<ItemTemplate>
<div>
<asp:Label ID="lblOrgName" runat="server" Text='<%#Eval("OrgNameAndTraineeNo") %>'></asp:Label>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Remark" HeaderText="备注" ></asp:BoundField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
//备注：
texts += $(this).parent().attr("title") + ";";
//解决CheckBox为服务器控件的问题,通过取得当前CheckBox对象的父对象的title属性来取得保存在其中的ID值，因为服务器CheckBox不支持value属性
在页面每一个CheckBox被解析为，在外面包了一个<span></span>作为它的父对象
<span name="chkClass" title="fde867e6-6f95-47cf-aab8-8f25c4695e37">
<input id="ctl00_SmartComContentPlace_gvClassInfoList_ctl02_chkClass" type="checkbox" name="ctl00$SmartComContentPlace$gvClassInfoList$ctl02$chkClass" />
</span>
另外JQuery有用的几个方法有如下:
1、children
这个函数得到一组元素的直接子级。
如： $('.rating').children('.on')
2、filter
这个函数通过传递的选择表达式从一个集合中过滤元素。任何不匹配这个表达式的元素将从选择的集合中移除
如：：$('.star').filter('.on')
3、not
与filter恰恰相 反，not()从集合中移除匹配的元素。
$('.star').not(':even')
4、add
如果我们想在集合中增加一些元素怎么办？add()函 数正是做这件事的。
$('.star').add('.photo')
6、parent
parent()函数选取一系列元素的直接父级。
$('.start:first').parent()
7、parents
这是复数形式，parents()选 择集合的所有祖先元素。我的意思是所有祖先元素包括直接父级到“body”和“html”元素。所以最好通过传递表达式缩小选择结果。
通过给parents()传 递.container参数，div.container将被选中，它实际上第一个star的祖父。
$('.star).parents('.container')
8、siblings
这个函数选择一组元素的所有兄弟姐妹，传递一个表达式可以筛选结果。
9、prev & prevAll
prev()函数选择前一个兄弟节点。prevAll()选择一个元素集合前面所有的兄弟节点。
$('.rating:nth-child(3)').prevAll()//第三个节点前的兄弟节点被选中
10、next & nextAll
这些函数与prev和prevAll工作方式相同，不过它选择的是下一个兄弟姐妹。
$('.rating:nth-child(3)').nextAll()//第三个节点后的兄弟节点被选中
$('.star').click(function(){
$(this).addClass('on');
// 如何取得当前对象的 父级?
$(this).parent().addClass('rated');
// 如何获得当前对象左 侧的star?
$(this).prevAll().addClass('on');
$(this).nextAll().removeClass('on');
});
以上10个函数链接：http://www.chinaz.com/Program/XML/033011015R010.html
另外如下：
〈body〉
〈div id=“one“〉
〈div id=“two“〉hello〈/div〉
〈div id=“three“〉
〈p〉〈a href=“#“〉tonsh〈/a〉〈/p〉
〈/div〉
〈/div〉
$(”a”).parent()将会得到父对象〈p〉
$(”a”).parents()得到父对象为〈p〉〈div.3〉〈div.1〉
$(”a”).parents().filter(”div”)将得到〈div.3〉〈div.1〉,还可以写成$(”a”).parents(”div”)。
如果想的到〈div.2〉对象可以写成这样：$(”a”).parents(”div:eq(0)”)。
如果需要点击〈a〉链接时弹出〈div.2〉中的内容，就这么办：
var id=$(“a“).parents(“div:eq(1)“).children(“div:eq(0)“).html();
alert(id);
