how to get content of html table cell using javascript javascript depending on checkbox

Firstly, I recommend using addEventListener over an onClick attribute - this will give us an event to work with that can be used to target the element without querying a selector.

I'd also recommend storing this data and accessing it in a different way than getting the content of an HTML tag - data attributes are a well supported standard.

I've taken the liberty of tidying up the table markup, too, so it has a semantically correct header and body:

<table border=1 id='products'>
  <thead>
    <tr>
      <th>item id</th>
      <th>item Name</th>
      <th>item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type='checkbox' data-product='rice' data-price='300'></td>
      <td>Rice</td>
      <td>300</td>
    </tr>
    <tr>
      <td><input type='checkbox' data-product='sugar' data-price='200'></td>
      <td>Sugar</td>
      <td>200</td>
    </tr>
    <tr>
      <td><input type='checkbox' data-product='tea' data-price='100'></td>
      <td>Tea</td>
      <td>100</td>
    </tr>
  </tbody>
 </table>

With this, we can rewrite our JS to add an event listener to each of the inputs:

let inputs = document.querySelectorAll('input[type="checkbox"]')

for (let input of inputs) {
    input.addEventListener('click', (event) => {
        const product = event.target.dataset.product
        const price = event.target.dataset.price
    })
}

document.querySelectorAll returns an Array of all elements that match the selector on the page.

We can then iterate over this array to do the same thing to each input - in this case, apply an eventListener.

This eventListener will be for the 'click' event, and the second argument is the function that will be run when the event is triggered.

The argument of this second function is event, which contains all the information about the event. We can use event.target to get the element that was clicked, and then event.target.dataset to get all the data properties of that HTML element.

You need to get the event object (e). The event object target, is the clicked element. Get the checked property of the target for the if/else. If it's checked, using closest we can get to the tr, and find the requested child:

document.querySelectorAll('#products [type=checkbox]')
  .forEach(function(input) {
    input.addEventListener('click', getPrice);
  });

function getPrice(e) {
  if(e.target.checked) {
    console.log(e.target.closest('tr').children[2].innerText);
  } else {
    console.log('not checked');
  }
}

<table border=1 id='products'>
  <tr>
    <td>item id</td>
    <td>item Name</td>
    <td>item Price</td>
  </tr>

  <tr>
    <td><input type='checkbox' id='p[]' name='prices[]'></td>
    <td>Rice</td>
    <td>300</td>
  </tr>
  <tr>
    <td><input type='checkbox' id='p[]' name='prices[]'></td>
    <td>Sugar</td>
    <td>200</td>
  </tr>
  <tr>
    <td><input type='checkbox' id='p[]' name='prices[]'></td>
    <td>Tea</td>
    <td>100</td>
  </tr>
</table>

Here's my approach :

 function getPrice()
  {
    var checkedValue=0; 
var inputElements = document.getElementsByClassName('checkbox');

for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue += parseFloat(inputElements[i].value);
           
          
      }
     
}
 alert(checkedValue);
 }

<table border=1 id='products'>
  <tr><td>item id</td><td>item Name</td><td>item Price</td></tr>

  <tr><td><input class="checkbox" type='checkbox' id='p-1' name='prices[]'  onClick='getPrice()' value="300" ></td><td>Rice</td><td>300</td></tr>
  <tr><td><input class="checkbox" type='checkbox' id='p-2' name='prices[]'  onClick='getPrice()' value="200"></td><td>Sugar</td><td>200</td></tr>
  <tr><td><input class="checkbox" type='checkbox' id='p-3' name='prices[]'  onClick='getPrice()' value="100"></td><td>Tea</td><td>100</td></tr>
  </table>

since this uses querySelectorAll, this requires a relatively modern browser

first, get the checked checkbox and change it to Array so that we can map it:

var chk = Array.prototype.slice.call(document.querySelectorAll('[type=checkbox]:checked'));

then map it to get the neighboring td content

var vals = chk.map(function(c){
    // c is the checkbox, 
    // its parent is the TD that contains the checkbox, 
    // the TD's parent is the TR that the checkbox reside
    // the children of the TR is the TDs that we are looking for
    // since you need to get the third column then get the third TD (start from 1, not 0)
    // get the third textContent
    return c.parentNode.parentNode.childNodes[3].textContent;
});

whit this, you get an array of the selected checkbox's third column

you can console.log(vals) to see the content

here's a sample https://jsfiddle.net/665ap2u7/3/