>웹 프론트엔드 >JS 튜토리얼 >jquery 양식 작업 2_jquery

jquery 양식 작업 2_jquery

WBOY
WBOY원래의
2016-05-16 18:08:281231검색

체크박스의 계단식 효과

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

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

모두 선택/모두 선택 취소

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 옵션:선택됨')과 동일
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.