jquery 폼 조작 2

checkbox 의 직렬 연결 효과

 
<form> 
      ？<br/> 
<input type="checkbox" id="CheckedAll" />  /   <br/> 
<input type="checkbox" name="items" value="  "/>   
<input type="checkbox" name="items" value="  "/>   
<input type="checkbox" name="items" value="   "/>    
<input type="checkbox" name="items" value="   "/>    
<input type="button" id="send" value="   "/> 
$('#CheckedAll').click(function(){ 
$('[name=items]:checkbox').attr("checked", this.checked); 
}) 

id 가"CheckedAll"인 체크 상 자 를 누 르 면 체크 상자 그룹 이 선 택 됩 니 다.체크 상자 그룹 에서 선택 상 태 를 취소 할 때 id 가"CheckedAll"인 체크 상자 가 선택 상 태 를 취소 하지 않 습 니 다.이 문 제 를 해결 하기 위해:

 
$('[name=items]:checkbox').click( 
function(){ 
var flag = true; 
$('[name=items]:checkbox').each(function(){ 
if(!this.checked) 
flag = false; 
}); 
$('#CheckedAll').attr('checked', flag); 
}) 
//                      
$('[name=items]:checkbox').click( 
function(){ 
var $tmp = $('[name=items]:checkbox'); 
//  filter        ，    CheckedAll   
$('#CheckedAll').attr('checked', $tmp.length == $tmp.filter(':checked').length); 
}) 

드 롭 다운 상자 의 응용

 
<div class="content"> 
<select multiple id="select1" style="width:100px;height:100px;"> 
<option value="1">  1</option> 
<option value="2">  2</option> 
<option value="3">  3</option> 
<option value="4">  4</option> 
<option value="5">  5</option> 
<option value="6">  6</option> 
<option value="7">  7</option> 
</select> 
<div> 
<span id="add">       </span> 
<span id="add_all">       </span> 
</div> 
</div> 
<div class="content"> 
<select multiple id="select2" style="width:100px;height:100px;"> 
</select> 
<div> 
<span id="add">       </span> 
<span id="add_all">       </span> 
</div> 
<div> 
//            
$('#add').click(function(){ 
var $options = $('#select1 option:selected');//        
$options.appendTo('#select2');//      
}); 
//            
$('#add').click(function(){ 
var $options = $('#select1 option');//        
$options.appendTo('#select2');//      
}); 
//            
$('#select1').dblclick(function(){ 
var $options = $('option:selected',this);//        
$options.appendTo('#select2');//      
}) 

PS:$(option:selected',this),$()는 2 개의 인자 가 있 습 니 다.하 나 는 선택 기 이 고 하 나 는 역할 영역 입 니 다.$('\#select 1 option:selected')에 해당 합 니 다.