-체크하기

$("input:checkbox[id='ID']").prop("checked", true);        // id 

$("input:checkbox[name='NAME']").prop("checked", true);   //name

-체크풀기

$("input:checkbox[id='ID']").prop("checked", false);        // id  

$("input:checkbox[name='NAME']").prop("checked", false);   //name

 

-체크 여부 확인

$("input:checkbox[id='ID']").is(":checked") == true : false             // id 

$("input:checkbox[name='NAME']").is(":checked") == true : false   //name



체크박스 배열처리, 변수 하나에 담기

참고: https://neptune297.tistory.com/60

저작자표시 비영리 변경금지

'* Programming > JQuery' 카테고리의 다른 글

삼항연산자  (0) 2019.11.19
Select Box 제어  (0) 2019.11.11
문자열 제거 이벤트  (0) 2018.08.09
날짜(datepicker) 시작일 종료일  (0) 2018.06.15
세션 SET, GET, REMOVE  (0) 2018.05.24

//숫자를 제외한 문자열 삭제(공통)

function commonStrReplace(event, id, flag){


var tmpVal = $('#'+id).val();


if (!(event.keyCode >=37 && event.keyCode<=40)){

tmpVal = tmpVal.replace(/[^0-9]/g,'');

var tmp = "[ㄱ-ㅎ가-힣]"

tmpVal = tmpVal.replace(tmp,'');

$('#'+id).val(tmpVal);

if(flag == 'NUM'){

tmpVal = Number(tmpVal);

if(tmpVal == 0) $('#'+id).val('');

}

}

}



사용

$('input[id$=seriesDesc]').on({

'keyup paste change':function(e){

var id = $(this).attr('id');

commonStrReplace(event, id, 'NUM');

}

});

저작자표시 비영리 변경금지

'* Programming > JQuery' 카테고리의 다른 글

Select Box 제어  (0) 2019.11.11
input 체크박스  (0) 2019.10.16
날짜(datepicker) 시작일 종료일  (0) 2018.06.15
세션 SET, GET, REMOVE  (0) 2018.05.24
replace로 태그 제거하기  (0) 2018.05.23

소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
            $('h1').css('border','1px solid red'); 
            $('ol>li:contains("menu3")').css('border','1px solid red'); 
            $('ol>li:has("em")').css('border','1px solid red'); 
            $('ol>li').find('em').css('border','1px solid red'); //위의 em과 비교
            $('ol>li:has("li")').css('border','1px solid red'); 
            $('ol>li:eq(1)').siblings().css('border','1px solid red');
            $('ol>li').not('ol>li:eq(1)').css('border','1px solid red');//위와 동일결과
            $('ol>li').contents().css('border','1px solid red');
            $('ol>li').contents().filter('strong').css('border','1px solid red');
            
            $('ol>li').filter('.cl1').css('border','1px solid red');
            //$('ol>li').find('.cl1').css('border','1px solid red');//적용되지않는다
            $('ol>li').find('a').css('border','1px solid red');//찾는방법 이해하기 자식요소중에 찾는것
            $('a:contains("menu3")').parent().children().css('border','1px solid red');
            $('ol>li:last').children().children('li:last').css('border','1px solid red');
            $('ol>li:last').children().children().children().css('border','1px solid red').end().css('border','1px solid gray');
            
            $('ol>li').not('li:eq(1)').filter('.cl1').css('border','1px solid red').end().css('color','green');
        });
    </script>
    
</head>
<body>
    <h1>목차</h1>
    <ol>
        <li>menu1</li>
        <li>menu<em>2</em></li>
        <li class="cl1"><a href="#">menu3</a></li>
        <li><strong>menu4</strong></li>
        <li>
            <ul>
                <li>menu4-1</li>
                <li><a href="#">menu4-2</a></li>
            </ul>
        </li>
    </ol>
</body>
</html>
cs


결과

$('ol>li:contains("menu3")').css('border','1px solid red');

$('ol>li:contains("menu3")').css('border','1px solid red'); 

contains("")는 괄호 안의 내용과 일치하는 것을 선택. "me", "3" 등의 글을 넣어 보고 비교

$('ol>li:has("em")').css('border','1px solid red');

$('ol>li').find('em').css('border','1px solid red');

둘의 결과를 비교

has를 쓴 결과

find를 쓴 결과

$('ol>li:eq(1)').siblings().css('border','1px solid red');

$('ol>li').not('ol>li:eq(1)').css('border','1px solid red');

siblings()는 형제 노드를 말한다. eq(1)에 해당하는 것을 뺀 형제노드들이 선택된다.

두줄의 결과는 동일하다.

$('ol>li').contents().css('border','1px solid red');

$('ol>li').contents().filter('strong').css('border','1px solid red');

이것은 위의 결과에서 'strong'태그만을 필터로 거쳐 menu4만 선택된다

$('ol>li').filter('.cl1').css('border','1px solid red');

$('ol>li').find('a').css('border','1px solid red');

filter와 find의 차이는 find는 자식노드 중에서 찾는다



...등 실행




저작자표시 비영리 변경금지

'* Programming > JQuery' 카테고리의 다른 글

pdf파일 및 사진파일 팝업창으로 띄우기  (0) 2018.03.08
부트스트랩 달력 기능  (0) 2018.03.08
ex05.html(선택자)  (0) 2016.10.06
ex04.html  (0) 2016.10.06
ex03.html(href)  (0) 2016.10.06

소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
//            $('input[type="text"]').css('border','1px solid red');
            $(':text').css('border','1px solid red');//위와 동일한 결과
            $(':password').css('background-color','gray')
            $(':submit').css('background-color','yellow')//전송과 버튼1 버튼이 적용
            $(':reset').css('background-color','gray')//취소 버튼2 버튼이 적용
            $(':checked').css('border','1px solid yellow');//선택자는 선택이됨 css가안먹
            $(':checked').next().css('border','2px solid yellow');
            $(':selected').css('color','red');
            
        });
        
    </script>
</head>
<body>
    <h1>회원가입</h1>
    <form action="">
       <p>
            <label for="id">id</label><input type="text" id="id"/>
       </p>
       <p>
           <label for="pw">pw</label><input type="password" id="pw"/>
       </p>
       <p>
           <select>
                <option>축구</option>
                <option selected='selected'>농구</option>
                <option>야구</option>
            </select>
       </p>
       <p>
           <input type="checkbox" id="chk" checked='checked'/>
           <label for="chk">이용약관 동의</label>
       </p>
        <input type="submit" value="전송">
        <input type="reset" value="취소">
        <button>버튼1</button>
        <button type="reset">버튼2</button>
    </form>
</body>
</html>
cs

결과


저작자표시 비영리 변경금지

'* Programming > JQuery' 카테고리의 다른 글

부트스트랩 달력 기능  (0) 2018.03.08
ex06.html  (0) 2016.10.07
ex04.html  (0) 2016.10.06
ex03.html(href)  (0) 2016.10.06
ex02.html  (0) 2016.10.06

소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
            $('li:visible').css('color',"red");
            $('li:hidden').css("display",'block');
        });
    </script>
</head>
<body>
    <h1>메뉴</h1>
    <ul>
        <li>menu1</li>
        <li style="display:none;">menu2</li>
        <li>menu3</li>
    </ul>
</body>
</html>
cs

결과


저작자표시 비영리 변경금지

'* Programming > JQuery' 카테고리의 다른 글

ex06.html  (0) 2016.10.07
ex05.html(선택자)  (0) 2016.10.06
ex03.html(href)  (0) 2016.10.06
ex02.html  (0) 2016.10.06
ex01.html  (0) 2016.10.06

+ Recent posts

티스토리툴바