У меня есть список флажков, которые я хочу, чтобы их содержимое переключалось при проверке. Я написал это с помощью jQuery, но мне хотелось бы как-то оптимизировать мой код таким образом, что мне не нужно писать функцию для каждого флажка.Множество флажков с помощью jquery
$(document).ready(function() {
$("#purpose-1").click(function() {
$("#purpose-detail-1").toggle(this.checked);
}).triggerHandler('click');
$("#purpose-2").click(function() {
$("#purpose-detail-2").toggle(this.checked);
}).triggerHandler('click');
$("#purpose-3").click(function() {
$("#purpose-detail-3").toggle(this.checked);
}).triggerHandler('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<input type="checkbox" id="purpose-1">Exhibition
<ul id="purpose-detail-1">
<li>
<div>Title:</div>
<div>
<input type="text">
</div>
</li>
<li>
<div>Opening Date:</div>
<div>
<input type="text">
</div>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="purpose-2">Publication
<ul id="purpose-detail-2">
<li>
<div>Title:</div>
<div>
<input type="text">
</div>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="purpose-3">Event
<ul id="purpose-detail-3">
<li>
<div>Title:</div>
<div>
<input type="text">
</div>
</li>
<li>
<div>Event Date:</div>
<div>
<input type="text">
</div>
</li>
<li>
<div>Event Time:</div>
<div>
<input type="text">
</div>
</li>
</ul>
</li>
</ul>
Спасибо за ваш ответ. У меня есть другой вопрос: что, если «ul» не является следующим ближайшим элементом после «ввода»? –
Если он находится в одном элементе, вы можете использовать '$ (this) .parent(). Find ('ul') ...' см. Обновленный ответ –