Как переключить флажок с помощью соседнего элемента?

Моя цель - установить флажок, который отменяет выбор всех, кроме близлежащего элемента menu1, когда нажата кнопка .only. Во-первых, я пытался на самом деле выбрать соответствующий элемент, когда нажата кнопка .only.Как переключить флажок с помощью соседнего элемента?

Вот как я начал: я пытаюсь выбрать общий родитель между .only и .menu1, а затем проверить его с помощью prop('checked', true), но то, что у меня есть, не работает.

https://jsfiddle.net/hjng93ro/

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

если мы проверяем первый вариант вы хотите, чтобы отменить то же самое после нажатия на '.only' около $ 500? –

Сначала снимите все .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); 
});

Вот JS скрипка: https://jsfiddle.net/hjng93ro/7/

источник

2016-09-25 18:14:43 queensGambit

Как переключить флажок с помощью соседнего элемента?

ответ

Смежные вопросы