jQuery 작업에 대한 일반적인 제어 방법 요약-JS 튜토리얼-php.cn

jQuery 작업에 대한 일반적인 제어 방법 요약

WBOY

풀어 주다： 2016-05-16 16:07:58

원래의

1020명이 탐색했습니다.

이 기사의 예는 jQuery 운영 양식의 일반적인 제어 방법을 요약합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

다음 JS 코드는 jQuery가 양식(select, radiobox, checkbox 포함)에서 공통 컨트롤을 작동하는 일반적인 방법을 나열합니다.

라디오 작동을 위한 HTML 코드

Radion
<input type="radio" name="rd" id="rd1" checked="checked" value="rd1" />
<input type="radio" name="rd" id="rd2" value="rd2" />
<input type="radio" name="rd" id="rd3" value="rd3" />

로그인 후 복사

1. 선택한 값을 가져옵니다. 세 가지 방법을 사용할 수 있습니다.

$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

로그인 후 복사

2. 첫 번째 라디오를 선택한 값으로 설정합니다.

$('input:radio:first').attr('checked', 'checked');

로그인 후 복사

또는

$('input:radio:first').attr('checked', 'true');

로그인 후 복사

참고:

attr("checked",'checked')= attr("checked", 'true')= attr("checked",true)

로그인 후 복사

3. 마지막 라디오를 선택한 값으로 설정합니다:

$('input:radio:last').attr('checked', 'checked');

로그인 후 복사

또는

$('input:radio:last').attr('checked', 'true');

로그인 후 복사

4. 인덱스 값에 따라 라디오를 선택한 값으로 설정합니다.

$('input:radio').eq(索引值).attr('checked', 'true');

로그인 후 복사

인덱스 값=0,1,2....
또는

$('input:radio').slice(1,2).attr('checked', 'true');

로그인 후 복사

5. Value 값에 따라 Radio를 선택한 값으로 설정합니다

$("input:radio[value='rd2']").attr('checked','true');

로그인 후 복사

또는

$("input[value='rd2']").attr('checked','true');

로그인 후 복사

6. 값이 rd2인 라디오를 삭제합니다

$("input:radio[value='rd2']").remove();

로그인 후 복사

7. 삭제할 라디오

$("input:radio").eq(索引值).remove();

로그인 후 복사

인덱스 값=0,1,2....
세 번째 라디오를 삭제하고 싶다면:

$("input:radio").eq(2).remove();

로그인 후 복사

8. 트래버스 라디오

$('input:radio').each(function(index,domEle){
//写入代码
});

로그인 후 복사

다음 코드는 DropDownList의 일반적인 작업 방법을 보여줍니다

DropDownList
<select id="sel">
<option value="1" selected="selected">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">d</option>
<option value="5">e</option>
</select>

로그인 후 복사

1. 선택한 항목의 값을 가져옵니다.

$('select#sel option:selected').val();

로그인 후 복사

또는

$('select#sel').find('option:selected').val();

로그인 후 복사

선택한 항목의 텍스트 값 가져오기:

$('select#seloption:selected').text();

로그인 후 복사

또는

$('select#sel').find('option:selected').text();

로그인 후 복사

2. 현재 선택한 항목의 인덱스 값을 가져옵니다.

$('select#sel').get(0).selectedIndex;

로그인 후 복사

3. 현재 옵션의 최대 인덱스 값을 가져옵니다.

$('select#sel option:last').attr("index")

로그인 후 복사

4. DropdownList의 길이를 가져옵니다.

$('select#sel')[0].options.length;

로그인 후 복사

또는

$('select#sel').get(0).options.length;

로그인 후 복사

5. 첫 번째 옵션을 선택한 값으로 설정합니다:

$('select#sel option:first').attr('selected','true')

로그인 후 복사

또는

$('select#sel')[0].selectedIndex = 0;

로그인 후 복사

6. 마지막 옵션을 선택한 값으로 설정:

$('select#sel option:last).attr('selected','true')

로그인 후 복사

7. 인덱스 값에 따라 선택한 값으로 옵션을 설정합니다.

$('select#sel')[0].selectedIndex =索引值;

로그인 후 복사

인덱스 값=0,1,2....
8. 선택한 값으로 Value=4를 사용하여 옵션을 설정합니다.

$('select#sel').attr('value','4');

로그인 후 복사

또는

$("select#sel option[value='4']").attr('selected', 'true');

로그인 후 복사

9. 값=3인 옵션 삭제:

$("select#sel option[value='3']").remove();

로그인 후 복사

10. 삭제해야 할 옵션:

$(" select#sel option ").eq(索引值).remove();

로그인 후 복사

인덱스 값=0,1,2....
3번째 라디오를 삭제하고 싶다면

$(" select#sel option ").eq(2).remove();

로그인 후 복사

11. 첫 번째 옵션 삭제:

$(" select#sel option ").eq(0).remove();

로그인 후 복사

또는

$("select#sel option:first").remove();

로그인 후 복사

12. 마지막 옵션 삭제:

$("select#sel option:last").remove();

로그인 후 복사

13. 드롭다운 목록 삭제:

$("select#sel").remove();

로그인 후 복사

14. 선택 후 옵션 추가:

$("select#sel").append("<option value='6'>f</option>");

로그인 후 복사

15. 선택 항목 앞에 옵션 추가:

$("select#sel").prepend("<option value='0'>0</option>");

로그인 후 복사

16. 트래버스 옵션:

$(' select#sel option ').each(function (index, domEle) {
//写入代码
});

로그인 후 복사

다음 코드는 jQuery의 체크박스 작동에 대한 일반적인 방법을 보여줍니다

CheckBox
<input type="checkbox" id="ck1" name="ck" vlaue="1" checked="checked" />
<input type="checkbox" id="ck2" name="ck" vlaue="2" />
<input type="checkbox" id="ck3" name="ck" vlaue="3" />
<input type="checkbox" id="ck4" name="ck" vlaue="4" />

로그인 후 복사

1. 단일 체크박스 선택 항목 가져오기(3가지 작성 방법):

$("input:checkbox:checked").val()

로그인 후 복사

또는

$("input:[type='checkbox']:checked").val();

로그인 후 복사

또는

$("input:[name='ck']:checked").val();

로그인 후 복사

2. 여러 개의 체크박스 선택 항목 가져오기:

$('input:checkbox').each(function() {
if ($(this).attr('checked') ==true) {
alert($(this).val());
}
});

로그인 후 복사

3. 첫 번째 확인란을 선택한 값으로 설정합니다.

$('input:checkbox:first').attr("checked",'checked');

로그인 후 복사

또는

$('input:checkbox').eq(0).attr("checked",'true');

로그인 후 복사

4. 마지막 체크박스를 선택한 값으로 설정합니다:

$('input:radio:last').attr('checked', 'checked');

로그인 후 복사

또는

$('input:radio:last').attr('checked', 'true');

로그인 후 복사

5. 인덱스 값을 기반으로 확인란을 선택한 값으로 설정합니다.

$('input:checkbox).eq(索引值).attr('checked', 'true');

로그인 후 복사

인덱스 값=0,1,2....
또는

$('input:radio').slice(1,2).attr('checked', 'true');

로그인 후 복사

6. 여러 확인란을 선택합니다.
첫 번째와 두 번째 확인란을 동시에 선택하세요.

$('input:radio').slice(0,2).attr('checked','true');

로그인 후 복사

7. 값 값을 기준으로 확인란을 선택한 값으로 설정합니다.

$("input:checkbox[value='1']").attr('checked','true');

로그인 후 복사

8. 값=1인 확인란을 삭제합니다.

$("input:checkbox[value='1']").remove();

로그인 후 복사

9. 삭제할 체크박스:

$("input:checkbox").eq(索引值).remove();

로그인 후 복사

인덱스 값=0,1,2....
세 번째 확인란을 삭제하려면:

$("input:checkbox").eq(2).remove();

로그인 후 복사

10.遍历checkbox：

$('input:checkbox').each(function (index, domEle) {
//写入代码
});

로그인 후 복사

11.全部选中

$('input:checkbox').each(function() {
$(this).attr('checked', true);
});

로그인 후 복사

12.全部取消选择：

$('input:checkbox').each(function () {
$(this).attr('checked',false);
});

로그인 후 복사

希望本文所述对大家的jQuery程序设计有所帮助。