jquery 작업 라디오 버튼, 확인란, 드롭다운 목록 구현 code_jquery

1. 확인란 선택 작업: 실제로는 Jquery 선택기를 사용하는 것입니다. Jquery 선택기를 보려면 여기를 클릭하세요.
html 코드:

코드 복사 코드는 다음과 같습니다.

좋아하는 스포츠는 다음과 같습니다.
축구
농구
배드민턴
탁구

> Jquey js 스크립트:

코드 복사 코드는 다음과 같습니다. $('# checkAll'). 클릭(checkAll); // 모두 선택

$('#checkFootball').click(checkFootball); // 축구만 선택

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


참고: 선택을 취소하려면 여기서 true를 false로 바꾸세요.
축구 연산 선택
Jquey js 스크립트:

코드 복사

코드는 다음과 같습니다. function checkFootball() {

$(" [name='item']:checkbox").each(function () {

if (this.value == 'football')
{
this.checked = true;
}
})
}


참고: 구체적인 목적은 백그라운드에서 데이터를 검색하여 표시하는 것입니다. . 여기서는 선택 항목을 설정하고 현재 확인란의 값을 가져오기 위해 jQuery의 attr() 및 val() 메서드를 사용하지 않고 대신 jQuery 개체를 생성하는 것보다 더 효과적인 JavaScript의 기본 Dom 메서드를 사용합니다
2. 라디오 버튼 조작
html 코드:

코드 복사

코드는 다음과 같습니다. A B C D 어느 것을 선택하시겠습니까: A

B

C
D



선택한 문자 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. 드롭다운 상자(목록) 작업

코드 복사

코드는 다음과 같습니다.

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 {
var option = $('').text('choose' i).val( i)
selectContainer .append(option);
}
}

선택한 요소 가져오기

복사 code 코드는 다음과 같습니다:

function getSelectedOption()
{
/* 각 요소를 하나씩 팝합니다*/
var options = $('#choose > 옵션: 선택됨');
$.each(options, function () {
alert('option: ' this.value);
}); >/* 각 요소를 하나씩 팝하고 먼저 종의 약어를 표시합니다*/
$('#choose > option:selected').each(function() {
alert('option2: ' this.value );
});
// 데이터를 직접 팝업합니다. 드롭다운 박스인 경우 데이터를 직접 팝업합니다.
// 데이터
alert('val: ' $('#choose').val())
}


목록 지우기

코드 복사 코드는 다음과 같습니다.

functionclearOptions()

{
$( '#choose').empty()
}


일반적으로 사용되는 항목:

코드 복사 코드는 다음과 같습니다.

var ddl = $("# ddlDiaryType option:selected").text();//드롭다운 목록

var reb = $(" #RbIfprivate [checked=true]:radio").val();//라디오 버튼