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

我的目标是创建一个复选框菜单，当单击.only时，可取消选择除附近menu1元素以外的所有元素。首先，我试图选择时点击.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; 
}

来源

2016-09-25 Dambo

如果我们选中第一个选项，你想一下'近$ 500 .only'后取消一样吗？ –

首先全部取消.menu1，然后检查.menu1对应单击.only像以下。

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

UPDATED FIDDLE

来源

2016-09-25 17:56:23 Azim

谢谢，你介意使用'parents（）'添加一个解决方案吗？除了忘记不检查一切之外，我想明白我做错了什么。 – Dambo

这是非常大的解释。你可以通过所有使用的方法的文档。问题出在'has（）'方法。 @Dambo – Azim

您还需要取消选择所有复选框每次.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); 
});

这里的爵士小提琴： https://jsfiddle.net/hjng93ro/7/

来源

2016-09-25 18:14:43 queensGambit

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

回答

相关问题