किसी तालिका पंक्ति पर कहीं भी क्लिक करें और यह चेकबॉक्स को इसकी जांच करेगा ...?

Question

मैं यह पता लगाने की कोशिश कर रहा हूं कि यह कैसे करें, लेकिन मुझे यह नहीं मिल रहा है। मूल रूप से मैं एक तालिका पंक्ति पर कहीं भी क्लिक करने में सक्षम होना चाहते हैं और यह जाँच करेगा/बॉक्स जांचा अपने में। मैं जानता हूँ कि यह संभव है क्योंकि है कि क्या PHPMyAdmin करता है ...

यहाँ मेरी तालिका पंक्ति है

<tbody> 
<tr id="1" onclick="selectRow(1)"><td width="20px"><input type="checkbox" id="1" name="1/"></td><td>1</td><td>2011-04-21 22:04:56</td><td>action</td></tr> 

<tr id="2" onclick="selectRow(2)"><td width="20px"><input type="checkbox" id="2" name="2/"></td><td>2</td><td>2011-04-21 22:04:56</td><td>action</td></tr> 

</tbody> 

Answer 1

<script type="text/javascript"> 
function selectRow(row) 
{ 
    var firstInput = row.getElementsByTagName('input')[0]; 
    firstInput.checked = !firstInput.checked; 
} 
</script> 

...

<tbody> 
    <tr onclick="selectRow(this)"><td width="20px"><input type="checkbox" id="chk1" name="chk1/"></td><td>1</td><td>2011-04-21 22:04:56</td><td>action</td></tr>  
    <tr onclick="selectRow(this)"><td width="20px"><input type="checkbox" id="chk2" name="chk2/"></td><td>2</td><td>2011-04-21 22:04:56</td><td>action</td></tr> 
</tbody> 

_{ध्यान दें: आपके आईडी पर टक्कर मिल गया है। आपकी आईडी अद्वितीय होनी चाहिए।}

यहाँ कार्यक्रम संबंधी बंधन के साथ एक विकल्प है:

(function() { 
 
    function rowClick(e) { 
 
     // discard direct clicks on input elements 
 
     if (e.target.nodeName === "INPUT") return; 
 
     // get the first checkbox 
 
     var checkbox = this.querySelector("input[type='checkbox']"); 
 
     if (checkbox) { 
 
      // if it exists, toggle the checked property 
 
      checkbox.checked = !checkbox.checked; 
 
     } 
 
    } 
 
    // iterate through all rows and bind the event listener 
 
    [].forEach.call(document.querySelectorAll("tr"), function (tr) { 
 
     tr.addEventListener("click", rowClick); 
 
    }); 
 
})();

<table> 
 
    <tbody> 
 
     <tr> 
 
      <td> 
 
       <input type="checkbox" id="chk1" name="chk1" /> 
 
      </td> 
 
      <td>1</td> 
 
      <td>2011-04-21 22:04:56</td> 
 
      <td>action</td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <input type="checkbox" id="chk2" name="chk2" /> 
 
      </td> 
 
      <td>2</td> 
 
      <td>2011-04-21 22:04:56</td> 
 
      <td>action</td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <input type="checkbox" id="chk2" name="chk3" /> 
 
      </td> 
 
      <td>2</td> 
 
      <td>2011-04-21 25:30:16</td> 
 
      <td>action</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

इस एक बाहर का प्रयास करें ...

$("tr").click(function() { 
    var checkbox = $(this).find("input[type='checkbox']"); 
    checkbox.attr('checked', !checkbox.attr('checked')); 
}); 

http://jsfiddle.net/dVay8/

Answer 3

आप जावास्क्रिप्ट की जरूरत नहीं है के लिये इस:

td label { 
 
    display: block; 
 
}

<td width="20px"><input type="checkbox" id="chk2" name="chk2/"></td><td><label for="chk2">2</label></td><td><label for="chk2">2011-04-21 22:04:56</label></td><td><label for="chk2">action</label></td>

बस लेबल और एक छोटे से सीएसएस।