javascript - Onclick of Checkbox,place the checked value into a textbox and delete the unchecked value from textbox -
my code:
<!doctype html> <meta charset="utf-8"> <html> <head> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.datatables.min.js"></script> <script type="text/javascript" src="https://raw.githubusercontent.com/mpryvkin/plugins/master/pagination/simple_numbers_no_ellipses.js"></script> <link rel='stylesheet' href='style.css'> <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.datatables.min.css"> </head> <body> <div> <form action="/home/divya/html_docs/click.html" method="post" id="form1"> client_ip :<input type="text" id ="ip" name="client_ip" style="width: 600px;"/> <div id="subdiv"> <button type="submit" form="form1" value="submit">submit</button> </div> </div></br> <table id="example" class="display" cellspacing="0" width="100%"> </table> <script> $(document).ready(function() { $("#ip").val(''); $('#example').datatable( { "pagingtype": "full_numbers" } ); } ); var tabulate = function (data,columns) { var svg = d3.select('#ip').append("svg") var table = d3.select('#example') var thead = table.append('thead') var tbody = table.append('tbody') thead.append('tr') .selectall('th') .data(columns) .enter() .append('th') .text(function (d) { return d }) var rows = tbody.selectall('tr') .data(data) .enter() .append('tr') var cells = rows.selectall('td') .data(function(row) { return columns.map(function (column) { return { column: column, value: row[column] } }) }) .enter() .append('td') .text(function (d) { return d.value }) .append("input") .attr("id","change") .attr("type", "checkbox") .style("float","left") .on("click", function(d,i) { var csv = $(':checkbox[id=change]:checked').map(function(){return this.value;}).get().join(','); $('#ip').val(csv); }); return table; } d3.csv('http://localhost:3000/getcsv',function (data) { var columns = ['client_ip'] tabulate(data,columns) }); </script> </body> </html> here,
.on("click", function(d,i) { var csv = $(':checkbox[id=change]:checked').map(function(){return this.value;}).get().join(','); $('#ip').val(csv); }); in part,instead of getting "client_ip" in csv variable,i'm getting "on" csv variable.
when select checkbox,how client_ip's in text box instead of "on" value.when deselect checkbox,how delete deseclected value textbox.
can please me out regarding issue ...
in map function return checkbox value instead of returning text in cell.
change map function
var csv = $(':checkbox[id=change]:checked').map(function(){return this.value;}) to
var csv = $(':checkbox[id=change]:checked').map(function(){return $(this).parent().text();}) 
Comments
Post a Comment