radio 버튼 checked="checked" 시키기

$('input:radio[name="domain"][value="fancyup"]).prop('checked', true);

radio 버튼 체크된 값 가져오기

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

# 사용방법 1>

<div id="list1" data-id="1" data-name="홍길동"> 오호호 </div>

jQuery

var obj = $('#list1');

var data_id = obj .data('id');

var data_name = ob.data('name');

# 사용방법 2>

<div id="list2" data-id="2" data-member-name="유관순"> 대한독립만세 </div>

jQuery

var obj2 = $('#list2');

var data_id = obj2.data('id');

var data_member_name = obj2.data('memberName');

# 사용방법 3>

<div id="list3" data-id="3" data-options="{'name':'이순신', 'level':'장군'}"> 이순신 장군 </div>

jQuery

var obj3 = $('list3');

var data_id = obj3.data('id');

var data_options_name = obj3.data('options').name;

var data_options_level = obj3.data('options').level;

적극적으로 활용하세요.

저 같은 경우엔 touch start, touch move, touch end 같은 이벤트를 활용할때

a href 링크 대싱 data-url 를 활용해서 사용하고 있습니다.

<a href="">메뉴1</a> -> <a data-url="">메뉴 1</a>

$('a').on('click', function(){

var data_url = $(this).data('url');

window.location = data_url;

});

체크박스 사용 예제

1. 전체 선택/해제

2. 개별 선택/해제 

※ 배열 관련 자바스크립트는 underscorejs 를 사용(_.isArray, _.compact) 합니다.

# HTML /==============================

# -----------------------------------

<div> 

<input type="checkbox" id="chkall">전체선택

</div>

<ul id="user_list">

<li><input type="checkbox" name="chkid" value="4"><a>A</a></li>

<li><input type="checkbox" name="chkid" value="8"><a>B</a></li>

<li><input type="checkbox" name="chkid" value="5"><a>C</a></li>

<li><input type="checkbox" name="chkid" value="2"><a>D</a></li>

</ul>

# JAVASCRIPT /==========================

1. 전체 선택 / 해제

#--------------------------

var share_people = new Array(); 

function find_index(user_id){

var _index = -1;

var is_share_people = (_.isArray(share_people) && share_people.length>0) ? true : false;

if( !is_share_people){

return _index;

}

for(var i=0; i<share_people.length; i++){

var chkid=share_people[i];

if(chkid == user_id){

_index = i;

break;

}

}

return _index;

}

$('#chkall').on('click',function()

{

if( $(this).is(':checked') ){ //전체선택

$('input[name="chkid"]').each(function() {

var chkbox_val = $(this).val();

if(find_index(chkbox_val) == -1){

share_people.push(chkbox_val);

}

});

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

}else{ // 전체해제

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

share_people = new Array();

}

});

2. 개별 선택 및 해제

# -------------------------

$('input[name=chkid]:checkbox').on('click',function()

{

var chkbox_val = $(this).val();

var sp_index = find_index(chkbox_val) ;

if( $(this).is(':checked') ){

if(sp_index == -1){share_people.push(chkbox_val); }

}else{

if(sp_index != -1){share_people[sp_index]=false; }

share_people = _.compact(share_people);

}

});

# Model 만들기

==========================================

Taa = Backbone.Model.extend({

    urlRoot : '/list.php', // ajax를 통해서 json데이터를 가져올 php경로

    initialize: function(options){

        this.todate = options.todate;

        console.log(this.todate);

    },

    fetchParams: function(){

// model data에 값 등록

        this.fetch({ data: $.param({ todate: this.todate }) });

// urlRoot에 추가  query string 추가

        this.urlRoot+="?"+$.param({ todate: this.todate });  

    },

    url: function()

    {

        console.log(this.urlRoot);

        return this.urlRoot;

    }

});

# View

==========================================

TaaView = Backbone.View.extend({

    initialize: function(){

        _.bindAll(this, "render");

        this.model.fetch({

            success: this.render

        });

    },

    render: function(){

/*

{

"result":"true", 

"msg":[

{

position_day:20, 

list:[

{title:"제목"}

]

},

{

position_day:23, 

list:[

{title:"제목"}

]

}

]

}

*/

        console.log(JSON.stringify(this.model));

// 배열을 돌리면서 원하는 곳에 하기

        _.each(this.model.get('msg'), function(data){

            var dday_id = 'd'+data.position_day;

            var lists = data.list;

// unsderscore template 를 사용해 출력(난 jquery를 활용해 이미 불러온 템플릿 리소스 체크

            $('#'+dday_id).append($.template('calendar_data_template', {row : lists}));

        });

    }

});

# model 실행 --------------------------

var taa = new Taa({'todate' : '2015-05-01'});

taa.fetchParams();

# view 실행 ---------------------------

new TaaView({ model: taa });

JQUERY : HTML 에 특정 ID 값이 존재 하는지 체크하기

if ($("ID값").length > 0) {
  alert('id 있어요');
}