JavaScript Флажок с кнопкой обрушения

Question

Я хочу сделать ниже код работает для флажка с кнопкой свернуть.

<label> 
    <input type="checkbox" id="postageyes" name="postage1" value="Yes" />Yes</label> 
<div id="conditional1"> 
    <p>This should only show when the 'Yes' checkbox &lt;input&gt; element is checked.</p> 
    <a href="">close</a> 
</div> 

Javascript

var conditionalContent1 = $('#conditional1'), 
group = $('input[type=checkbox][name=postage1]'); 

group.change(function() { 
    conditionalContent1.toggle(group.filter(':checked').val() === 'Yes'); 
}).change(); 

, когда я проверил флажок новый DIV открыт, я хочу, чтобы сделать это. когда я нажимаю ссылку «Закрыть», открываем div и не снимаем флажок. Как это сделать. Кто-нибудь может помочь?

Answer 1

Вы можете использовать событие change на флажке. И toggle, чтобы скрыть/показать div.

$('#postageyes').on('change', function() { 
    $('#conditional1').toggle($(this).is(':checked')); 
}); 

$('#conditional1').on('click', 'a', function() { 
    $('#postageyes').prop('checked', false); 
    $('#conditional1').hide(); 
    return false; 
}); 

Демо: http://jsfiddle.net/tusharj/n7044syx/1/

Answer 2

Вы можете использовать функцию переключения и нажмите событие, чтобы добиться того, что вы упомянули.

$('#postageyes').click(function() { 
 
    $('#conditional1').toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<label> 
 
    <input type="checkbox" id="postageyes" name="postage1" value="Yes" />Yes</label> 
 
<div id="conditional1" style="display:none"> 
 
    <p>This should only show when the 'Yes' checkbox &lt;input&gt; element is checked.</p> 
 
    <a href="">close</a> 
 
</div>

Answer 3

EDIT: Tushar обновил свой ответ, когда я пишу это так ... да, не против! Это также сработает. Однако точка все еще стоит.

---

Я думаю, что часть проблемы заключается в том, что вы пытаетесь использовать якорный тэг ненадлежащим образом. Оставив href blank, перезагрузите страницу, так что ответ Тушара выглядит правильно, но на самом деле не делает то, что вы просите. Используйте кнопку (и соответствующим образом настройте ее, если хотите, чтобы она выглядела как ссылка), а затем обработайте ее событие щелчка, чтобы переключить флажок и скрыть содержимое.

Я модифицировал jsfiddle от Tushar, чтобы показать, что я имею в виду. Вы, вероятно, будете в состоянии сделать его более обтекаемым, чем это, но простая версия:

Заменить тег с:

<button id="closeButton">close</button> 

Затем добавьте следующее в ЯШ:

$('#closeButton').on('click', function() { 
    $('#postageyes').click(); 
}); 

https://jsfiddle.net/pnq8zu0L/