지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > jquery 양식 작업 2_jquery

jquery 양식 작업 2_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
풀어 주다： 2016-05-16 18:08:28
원래의
1283명이 탐색했습니다.

체크박스의 계단식 효과

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

🎜> 좋아하는 스포츠는 무엇인가요?

모두 선택/모두 선택 취소

Football
농구
배드민턴
탁구

$('#CheckedAll').click(function(){
$('[name=items]:checkbox').attr(" 확인됨", 이 .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');
//필터 메소드를 사용하여 체크박스를 필터링하고 CheckedAll
$('#CheckedAll').attr( 'checked', $tmp.length == $tmp.filter(':checked').length)
})


드롭다운 상자 적용


코드 복사 코드는 다음과 같습니다.
;select multiple id="select1" style="width: 100px;height:100px;">


<옵션 value="3">옵션 3
<옵션 value="4">옵션 4

<옵션 value="7"> 7


오른쪽에 추가하려면 선택하세요 ="add_all">오른쪽에 모두 추가



왼쪽에 추가
왼쪽에 모두 추가
선택한 옵션을 상대방에게 추가
$('#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개의 매개변수가 있습니다. 하나는 선택기이고 다른 하나는 범위입니다. $('#select1 옵션:선택됨')과 동일
관련 라벨：
表单操作
이전 기사：중급 및 고급 JSER_jquery를 위한 jQuery 1.5 소스 코드 해석 다음 기사：jquery_jquery를 기반으로 테이블을 동적으로 생성하기 위한 플러그인
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
url-rewrite - nginx 디렉토리 이후의 슬래시 문제
에서 1970-01-01 08:00:00
0
0
0
개발 환경 서버인 Nginx는 정적 파일 캐시를 지울 수 없습니다.
에서 1970-01-01 08:00:00
0
0
0
Nginx에서 502 문제를 빠르게 찾는 방법
에서 1970-01-01 08:00:00
0
0
0
이러한 요구 사항을 달성하기 위해 nginx를 사용하는 방법은 무엇입니까?
에서 1970-01-01 08:00:00
0
0
0
504 - nginx + fastcgi + Django 자주 504
에서 1970-01-01 08:00:00
0
0
0
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿