如何檢查和取消選中複選框，以及如何使複選框，點擊了該行的點擊

Question

只有一排上課highlightRowSelected一次，該行的複選框被選中 - 這是工作

如何使其他複選框取消不具有highlightRowSelected類以及其他行復選框ES可以勾選，但不應該添加highlightRowSelected類到該行，只有一行單擊（而不是從複選框COL）應該在類highlightRowSelected添加到該行

可以更改函數聲明並進行純js調用，而不是在html中指定getdetails（row）。 也行是動態的，所以着的硬編碼ID或東西在HTML

看看這個小提琴：https://jsfiddle.net/y7jqb5hp/13/

function getdetails(row) { 
 
    el = window.event.srcElement; 
 
    if (el.id.substr(0, 7) == 'eachRow') 
 
    el = null; 
 
    if (row.cells[0].children[0].checked == false && el != null) { 
 
    row.cells[0].children[0].checked = true; 
 
    } else if (row.cells[0].children[0].checked == false && el != null) { 
 
    row.cells[0].children[0].checked = true; 
 
    } 
 

 
    $("#tableID tbody tr").each(function() { 
 
    $(this).removeClass("highlightRowSelected"); 
 
    }); 
 
    
 
    $(row).addClass("highlightRowSelected"); 
 
}

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
td, 
 
th { 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
.highlightRowSelected { 
 
    background-color: #e2e2e2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tableID"> 
 
    <tr onclick="getdetails(this)"> 
 
    <th>checkbox</th> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tr onclick="getdetails(this)"> 
 
    <td><input name="eachRow" type="checkbox" /> </td> 
 
    <td>Alfreds </td> 
 
    <td>Maria </td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr onclick="getdetails(this)"> 
 
    <td><input name="eachRow" type="checkbox" /> </td> 
 
    <td>Centro </td> 
 
    <td>Francisco </td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr onclick="getdetails(this)"> 
 
    <td><input name="eachRow" type="checkbox" /> </td> 
 
    <td>Ernst </td> 
 
    <td>Roland </td> 
 
    <td>Austria</td> 
 
</table>

Answer 1

我剛剛更改了JS的第二個條件代碼，加入以取消選擇其他人：

$('input:checkbox').removeAttr('checked'); 

並從標題行中拿走getdetails。

還添加：

$('input:checkbox').click(function(e) { 
    e.stopPropagation(); 
}); 

處理的複選框從行點擊分別蜱。

function getdetails(row) { 
 
    el = window.event.srcElement; 
 
    if (el.id.substr(0, 7) == 'eachRow') 
 
    el = null; 
 
    if (row.cells[0].children[0].checked == false && el != null) { 
 
    $('input:checkbox').removeAttr('checked'); 
 
    row.cells[0].children[0].checked = true; 
 
    } else if (row.cells[0].children[0].checked == true && el != null) { 
 
    row.cells[0].children[0].checked = false; 
 
    } 
 

 
    $("#tableID tbody tr").each(function() { 
 
    $(this).removeClass("highlightRowSelected"); 
 
    }); 
 
    
 
    $(row).addClass("highlightRowSelected"); 
 
} 
 

 
$('input:checkbox').click(function(e) { 
 
    e.stopPropagation(); 
 
});

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
td, 
 
th { 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
.highlightRowSelected { 
 
    background-color: #e2e2e2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tableID"> 
 
    <tr> 
 
    <th>checkbox</th> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tr onclick="getdetails(this)"> 
 
    <td><input name="eachRow" type="checkbox" /> </td> 
 
    <td>Alfreds </td> 
 
    <td>Maria </td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr onclick="getdetails(this)"> 
 
    <td><input name="eachRow" type="checkbox" /> </td> 
 
    <td>Centro </td> 
 
    <td>Francisco </td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr onclick="getdetails(this)"> 
 
    <td><input name="eachRow" type="checkbox" /> </td> 
 
    <td>Ernst </td> 
 
    <td>Roland </td> 
 
    <td>Austria</td> 
 
</table>

Answer 2

use jquery to trigger the function, 

ex. 

<tr id="1" onclick="checkMe(this.id)"><input type='checkbox'></tr> 
<tr id="2" onclick="checkMe(this.id)"><input type='checkbox'></tr> 

jquery: 

function checkMe(id){ 
     $(this).closest('[type=checkbox]').attr('checked', true); 
} 

Answer 3

更新您的js函數：

function getdetails(row) { 

    if ($(row).find('input[type="checkbox"]').is(":checked")) { 
    $(row).find('input[type="checkbox"]').prop('checked', false); 
    $(row).removeClass("highlightRowSelected"); 
    return false; 
    } 

    var isChecked = false; 
    $("#tableID tbody tr").each(function() { 
    if ($(this).find('input[type="checkbox"]').is(":checked")) { 
     isChecked = true; 
    } 
    }); 

    if (isChecked) { 
    $(row).find('input[type="checkbox"]').prop('checked', true); 
    return false; 
    } else { 
    $('table input[type="checkbox"]').prop('checked', false); 
    $(row).find('input[type="checkbox"]').prop('checked', true); 
    } 

    $("#tableID tbody tr").each(function() { 
    $(this).removeClass("highlightRowSelected"); 
    }); 

    $(row).addClass("highlightRowSelected"); 
} 

更新fiddle