Question

我的目标是创建一个复选框菜单，在单击menu1时取消选中除.only元素之外的所有元素。首先，我在点击.only时尝试选择相应的元素。

以下是我的工作方式：我正在尝试选择.only和.menu1之间的共同父级，然后使用prop('checked', true)进行检查，但我所拥有的内容不起作用。

html和jquery

<html>
<head> 
<link rel="stylesheet" type="text/css" href="kayak.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>
<body>
<div class='boxmenu'>
<div class="row">
  <div class="right">
    <a class="only">only</a>
    <a class="price">$500</a>
  </div>
  <span>
    <input type="checkbox" name="cars" value="first" class='menu1'/>
    FirstOption
  </span>
</div>
<div class="row">
  <div class="right">
    <a class="only">only</a>
    <a class="price">$700</a>
  </div>
  <span>
    <input type="checkbox" name="cars" value="second" class='menu1'/>
    SecondOption
  </span>
</div>
</div>



<script>
$(document).ready(function() {
$('.only').on("click", function() {
   $(this).parents('.row').has('.menu1').first().prop('checked', true);
})
});


</script>

</body>
</html>

CSS

.right {
  float: right;
}
.only {
  display: none;
}
.price {
    display: inline;
}
.row:hover .only {
  display: inline;
}

.boxmenu {
    width: 300px;
}

Answer 1

首先取消选中所有.menu1，然后查看与所点击的.menu1对应的.only，如下所示。

$('.only').on("click", function() {
    $('.menu1').prop('checked', false);
    $(this).closest('.row').find('.menu1').prop('checked', true);
})

UPDATED FIDDLE

Answer 2

每次点击.menu1时，您还需要取消选中所有复选框。而且，而不是运行

$('.menu1').prop('checked', false)

每次点击时，最好先预先缓存所有.menu1个元素。

var $textboxes = $('.boxmenu').find(':checkbox'),
    unselectAllCheckboxes = function() {
    $textboxes.prop('checked', false);
};
$('.only').on("click", function() {
    unselectAllCheckboxes();
    $(this).closest('.row').find('.menu1').prop('checked', true);
});

这是js小提琴： https://jsfiddle.net/hjng93ro/7/

如何使用附近的元素切换复选框？

2 个答案: