Home • Programming • JQuery Apr 16th, 2015 at 01:03 PM

Read JSON data from data attribute by JQuery

<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

</head>
<body>
<form>
<div id="my" data-all='{"type": "page", "id": 1, "color": "#69F"}' />
 <input type="checkbox" name="a" value="1" data-id='{"id":2,"name":"test"}' />A
 <input type="checkbox" name="a" value="2" data-id="B" />B
 <input type="checkbox" name="a" value="3" data-id="C" />C
 
 <input type="checkbox" name="b" value="1" data-id="A" />E
 <input type="checkbox" name="b" value="2" data-id="B" />F
 <input type="checkbox" name="b" value="3" data-id="C" />G
 
 <input type="button" value="Submit" name="btnSubmit" id="btnSubmit" onClick="read()" />
</form>
<script>

function read(){
     
		$("input[type=checkbox]:checked").each(function () {
			var obj = $(this).data('id');
		   // var clonedobj = jQuery.extend({}, obj); //create a shallow
		   // clonedobj.ProductId = productId;
		    //var ob= JSON.stringify(obj)
			alert(obj.name);
			alert(obj.id);
		});
	var all = $("#my").data("all");

    $("#my").css({backgroundColor: all.color}).
    append(all.type + " " + all.id);
	
}
</script>
</body>
</html>

/10

Read JSON data from data attribute by JQuery

Comments 0

Share