js invalidates the html input checkbox

Question

Clicking input has no effect, why?

I want the effect to be that either clicking on the line or the input can be applied to the input.

var trs = document.getElementsByTagName('tr')
var control = true

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

  trs[i].onclick = function() {
    if (this.getElementsByTagName('input')[0].checked == true) {
      this.getElementsByTagName('input')[0].checked = false
    } else if (this.getElementsByTagName('input')[0].checked == false) {
      this.getElementsByTagName('input')[0].checked = true
    }
  }

  trs[i].onmouseenter = function() {
    this.style.backgroundColor = 'grey'
  }

  trs[i].onmouseleave = function() {
    this.style.backgroundColor = ''
  }
}

table {
  border: 1px solid black;
  border-collapse: collapse;
  width: 60%;
}

td {
  border: 1px solid black;
  text-align: center;
}

<table>
  <thead>
    <tr>
      <td><input type="Checkbox">全选</td>
      <td>商品</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="Checkbox"></td>
      <td>手机</td>
    </tr>
    <tr>
      <td><input type="Checkbox"></td>
      <td>电脑</td>
    </tr>
    <tr>
      <td><input type="Checkbox"></td>
      <td>手表</td>
    </tr>
    <tr>
      <td><input type="Checkbox"></td>
      <td>耳机</td>
    </tr>
  </tbody>
  <input type="Checkbox">

</table>

Please edit your question to add clarity to your challenge - the checkboxes seem to check/uncheck now when you click lines. Perhaps you can further explain and clarify what you need here. — Mark Schultheiss, Jan 12 '23 at 12:50
[this?](https://www.designcise.com/web/tutorial/how-to-toggle-a-checkbox-using-javascript) and also don't use onmouseenter... Just use css :hover — Yarin_007, Jan 12 '23 at 12:51
Please also note that your HTML is not perfectly valid - that last checkbox is outside the table body and any rows which is not valid as an element of "table" — Mark Schultheiss, Jan 12 '23 at 12:52
the expected effect is clearly flipping the checkbox value both when you click on the row and you click on the input checkbox. It was described clearly in the question and also can be easily read into the shared code. The main problem was using the event handler attributes (onclick...) that should contain strings and not functions. I just changed that approach in my answer using addEventListener instead — Diego D, Jan 12 '23 at 13:04

Diego D · Accepted Answer · 2023-01-13T14:38:36.180

There's something wrong with the event handler when the event triggers from a click on the checkbox itself instead of the table row.

If you print out the .checked property in that condition, you'll see its value flipped compared to its real value. Facing such outcome that I can't explain frankly (and it's not related to the fact that the event may have been bubbling occurring twice) a solution could be discriminating the element type triggering the event or just flipping the test conditions.

In the previous version of this answer, and in comments, I said that it was a mistake using onclick instead of addEventListener('click', ()=>{}) because it was supposed to be a string.

I WAS WRONG!

I assumed something like that because the corresponding html attributes <elementType onclick="" (...) /> are expected to be string to be evaluated but that's not the case for the properties.

Here I just used a different approach passing the handlers as functions (as intended) but more importantly better dealing with the exact element triggering the corresponding event that apparently solves the issue:

[...document.getElementsByTagName('tr')]
  .forEach( tr =>{
    tr.addEventListener('click', (event)=>{  
      const clickedRow = event.currentTarget;      
      const input = clickedRow.querySelector('input'); 
      if(event.target !== input)        
        input.checked = !input.checked;                    
    });    
    tr.addEventListener('mouseenter', (event)=>{
      event.target.style.backgroundColor = 'grey';
    });    
    tr.addEventListener('mouseleave', (event)=>{
      event.target.style.backgroundColor = 'unset';
    });    
  });

table {
  border: 1px solid black;
  border-collapse: collapse;
  width: 60%;
}

td {
  border: 1px solid black;
  text-align: center;
}

<table>
  <thead>
    <tr>
      <td><input type="Checkbox">全选</td>
      <td>商品</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="Checkbox"></td>
      <td>手机</td>
    </tr>
    <tr>
      <td><input type="Checkbox"></td>
      <td>电脑</td>
    </tr>
    <tr>
      <td><input type="Checkbox"></td>
      <td>手表</td>
    </tr>
    <tr>
      <td><input type="Checkbox"></td>
      <td>耳机</td>
    </tr>
  </tbody>  
</table>

js invalidates the html input checkbox

1 Answers1