jquery 작업 체크 상자,체크 상자,드 롭 다운 목록 구현 코드

1.콤 보 상자 의 전체 선택 동작:사실은 Jquery 선택 기 에 대한 활용 입 니 다.저 는 Jquery 선택 기 html 코드 를 보 겠 습 니 다.

 
<form> 
       ： 
<input type="checkbox" name="item" value="football"/> football 
<input type="checkbox" name="item" value="basketball"/> basketball 
<input type="checkbox" name="item" value="badminton"/> badminton 
<input type="checkbox" name="item" value="pingpong"/> pingpong 
<input type="button" id="checkAll" value="  "/> 
<input type="button" id="checkFootball" value="    "/> 
</form> 

Jquery js 스 크 립 트:

 
$('#checkAll').click (checkAll); //    
$('#checkFootball').click (checkFootball); //      
}); 
function checkAll() 
{ 
$('input [type="checkbox"][name="item"]').attr ("checked", true); 
// $('[name="item"]:checkbox').attr("checked", true); 
} 

주:전체 선택 은 여기 있 는 true 를 false 로 바 꾸 면 됩 니 다.축구 동작 Jquery js 스 크 립 트 선택:

 
function checkFootball() 
{ 
$(" [name='item']:checkbox").each(function () { 
if (this.value == 'football') 
{ 
this.checked = true; 
} 
}) 
} 

비고:구체 적 인 목적 은 배경 에서 데 이 터 를 꺼 내 는 것 을 해결 하기 위해 표시 합 니 다.jQuery 의 attr()와 val()방법 으로 현재 checkbox 의 값 을 선택 하고 가 져 오 는 것 을 설정 하지 않 았 습 니 다.자 바스 크 립 트 원생 의 Dom 방법 으로 바 꾸 었 습 니 다.jQuery 대상 을 만 드 는 것 보다 더 효과 적 입 니 다.2.체크 버튼 으로 html 코드 를 조작 합 니 다.

 
A B C D       ： 
<input type="radio" name="item" value="A"/>A 
<input type="radio" name="item" value="B"/>B 
<input type="radio" name="item" value="C"/>C 
<input type="radio" name="item" value="D"/>D 
<input type="button" id="getLetter" value="     "/> 

선택 한 알파벳 B Jquey js 스 크 립 트 초기 화:

 
$(document).ready(function() { 
//        B。 
$('[name="item"]:radio').each(function() { 
if (this.value == 'B') 
{ 
this.checked = true; 
} 
}); 
//           
$('#getLetter').click(getLetter); 
}); 

선택 한 알파벳 Jquey js 스 크 립 트 획득:

 
function getLetter() 
{ 
alert('      ：' + $('[name="item"][checked=true]:radio').val()); 
} 

3.드 롭 다운 상자(목록)작업

 
<select multiple id="choose" style="width=100px;heigth=160px"></select> 
<input id="addOptions" type="button" value="    "/> 
<input id="getSelectedOption" type="button" value="      "/> 
<input id="clearOptions" type="button" value="    "/> 

Jquey js 스 크 립 트:

 
$(document).ready(function() { 
$('#addOptions').click(addOptions); //         
$('#getSelectedOption').click(getSelectedOption); //         
$('#clearOptions').click(clearOptions); //          
$('#addOptions').click(); //             
}); 

추가 요소 Jquey js 스 크 립 트:

 
function addOptions() 
{ 
var selectContainer = $('#choose'); 
for (var i = 0; i < 5; i++) 
{ 
var option = $('<option></option>').text('choose' + i).val(i); 
selectContainer.append(option); 
} 
} 

선택 한 요소 획득

 
function getSelectedOption() 
{ 
/*          */ 
var options = $('#choose > option:selected'); 
$.each(options, function () { 
alert('option: ' + this.value); 
}); 
/*         ，       */ 
$('#choose > option:selected').each(function() { 
alert('option2: ' + this.value); 
}); 
//       ，        ，       ，              
//  ，    '，'     
alert('val: ' + $('#choose').val()); 
} 

목록 비우 기(456)7913)상용:

 
function clearOptions() 
{ 
$('#choose').empty(); 
}