有如下html代码：
1
2
3
4
5
| <select id="taskIsPassed" name="isPassed"> <option selected="selected" value="0">否</option> <option value="1">是</option></select>
//需要显示或隐藏的tr
<input name="checkbox2" type="checkbox" name="checkbox2" />张三</tr> |
当选择是时，显示id为taskCheckUser的tr，否则隐藏该tr
jquery代码：
1
2
3
4
5
6
7
8
9
|
//设计change事件
$("#taskIsPassed").change(function(){if(this.value=="1"){
$("#taskCheckUser").show();
}
else{
$("#taskCheckUser").hide();
}
}); |
jquery及javascript学习
jquery, 层, 显示, 隐藏
开门见山，直接介绍方法，假设页面html代码如下
|
<a
href=”javascript:;”
id=”all”>全部选择</a><br><a href=”javascript:;”
id=”delAll”>取消选择</a><br>
<a href=”javascript:;”
id=”antiAll”>反向选择</a>
<p><input
type=”checkbox” name=”checkbox1″>A
<input type=”checkbox”
name=”checkbox1″>
B
<input
type=”checkbox”
name=”checkbox1″>C</p><p><input
type=”checkbox” name=”checkbox1″>D
<input type=”checkbox”
name=”checkbox1″>E
<input type=”checkbox”
name=”checkbox1″>F</p>
|
全部选择代码：
| Jquery部分
//全部选择$(”#all”).click(function(){
$(”input[name='checkbox1']“).each(function(){
$(this).attr(”checked”,true);
});
});
普通javascirpt部分：
function checkAll(){for(i=0;i<newTask.length;i++){
e=newTask.elements[i];
if(e.type==’checkbox’){
if(e.checked=false){
e.checked=true;
}else{
e.checked=true;
}
}
}
}
|
取消选择代码:
| Jquery部分：
//取消选择$(”#delAll”).click(function(){
$(”input[name='checkbox1']“).each(function(){
$(this).attr(”checked”,false);
});
});
普通javascript部分：
function delAll(){for(i=0;i<newTask.length;i++){
e=newTask.elements[i];
if(e.type==’checkbox’){
if(e.checked=true){
e.checked=false;
}
else{
e.checked=false;
}
}
}
}
|
反向选择代码：
| Jquery部分：
//反向选择$(”#antiAll”).click(function(){
$(”input[name='checkbox1']“).each(function(){
$(this).attr(”checked”,!this.checked);
});
普通javascript部分：
function
antiAll(){for(i=0;i<newTask.length;i++){
e=newTask.elements[i];
if(e.type==’checkbox’){
e.checked=!e.checked;
}
}
}
|
ps：在使用jquery时，一定要把jquery.js的加载放到所有与jquery有关的js文件之前，否则可能导致无法加载其他js文件，而造成错误。
jquery及javascript学习