Question

点击div选中checkbox,div背景变。点击同胞div，原div无背景，不选中。同胞div选中checkbox且背景变色。

我只能分开实现单选和点击变色，请大神们帮忙看一下，谢谢
<table class="btable">
<tbody>
<tr id="data" datagrid-row-index="0" class="row">
<td field="id">
<div class="cellcheck">
<input type="checkbox" name="id" value="00a">
</div>
</td>
<td field="name">
<div style="height:auto;" class="datagrid-cell datagrid-cell-c1-name">765</div>
</td>
</tr>
<tr id="datagrid" datagrid-row-index="1" class="row">
<td field="id">
<div class="cell-check">
<input type="checkbox" name="id" value="0c7">
</div>
</td>
<td field="name">
<div style="height:auto;" class="datagrid-cell datagrid-cell-c1-name">S18</div>
</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$(".row").click(
function(){
$(this).css("background-color","#0092DC").siblings().css("background-color","white");
$(this).siblings().hover("background-color","#e2e2e2");
});
//单选
$('row').click(function(){
$('.cellcheck').find('input[type=checkbox]').bind('click', function () {
$('.cellcheck').find('input[type=checkbox]').not(this).attr("checked", false);
});
});

});
</script>

Answer 1

你搞的太复杂了，我写了个简单的案例给你，你看看吧，样式自己调整，看完请采纳（运行请记得加载jquery文件）

截图如下：

html如下：

<div class="checkbox">
  <input type="checkbox">
</div>
<div class="checkbox">
  <input type="checkbox">
</div>

css如下：

.checkbox{border: 1px solid #ddd;border-radius: 3px;margin: 10px;text-align: center;padding: 10px 15px;display: inline-block;cursor: pointer;}
.checkbox:hover{background: #eee;}
.active{background: #4c9cef !important;}

jquery如下：

$(".checkbox").click(function(){
  $(".checkbox").removeClass("active").find("input").removeAttr("checked", true);
  $(this).addClass("active").find("input").attr("checked", true);
});

Answer 2

采纳哦，稍微修改一下js 就可以了

$(document).ready(function(){
	$(".row").click(function(){
		$(this).css("background-color","#0092DC").siblings().css("background-color","white");
		$('input[name=id]:checked').prop('checked',false);
		$(this).find('input[type=checkbox]').prop('checked',true);
	});
});

追问

$('input[name=id]:checked').prop('checked', false);
能帮我解释一下这句吗？我有点会不过来。谢谢