I have this code:
<fieldset class="question">
<label for="coupon_question">Do you have a coupon?</label>
<input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
<span class="item-text">Yes</span>
</fieldset>
<fieldset class="answer">
<label for="coupon_field">Your coupon:</label>
<input type="text" name="coupon_field" id="coupon_field"/>
</fieldset>
And I would like to show/hide the "answer" fieldset (default is hidden) after a click on the checkbox in fieldset "question" How to do that. I wasn't able to do that using the technique for a classic elemetn like:
<script>
$().ready(function(){
$('.question').live('click',function() {
$('.answer').show(300);
}
,
function(){
$('.answer').hide(200);
}
);
});
</script>
Could somebody help me how to do that using checkbox? Also if possible to null (uncheck) the checkbox when it's hidden.
This question is related to
jquery
Try this
<script>
$().ready(function(){
$('.coupon_question').live('click',function()
{
if ($('.coupon_question').is(':checked')) {
$(".answer").show();
} else {
$(".answer").hide();
}
});
});
</script>
Try this
$(".answer").hide();
$(".coupon_question").click(function() {
if($(this).is(":checked")) {
$(".answer").show(300);
} else {
$(".answer").hide(200);
}
});
Simplest - and I changed the checkbox class to ID as well:
$(function() {_x000D_
$("#coupon_question").on("click",function() {_x000D_
$(".answer").toggle(this.checked);_x000D_
});_x000D_
});
_x000D_
.answer { display:none }
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
<fieldset class="question">_x000D_
<label for="coupon_question">Do you have a coupon?</label>_x000D_
<input id="coupon_question" type="checkbox" name="coupon_question" value="1" />_x000D_
<span class="item-text">Yes</span>_x000D_
</fieldset>_x000D_
_x000D_
<fieldset class="answer">_x000D_
<label for="coupon_field">Your coupon:</label>_x000D_
<input type="text" name="coupon_field" id="coupon_field" />_x000D_
</fieldset>
_x000D_
$(document).ready(function() {
$(document).on("click", ".question", function(e) {
var checked = $(this).find("input:checkbox").is(":checked");
if (checked) {
$('.answer').show(300);
} else {
$('.answer').hide(300);
}
});
});
Try
$(document).ready(function(){
//Register click events to all checkboxes inside question element
$(document).on('click', '.question input:checkbox', function() {
//Find the next answer element to the question and based on the checked status call either show or hide method
$(this).closest('.question').next('.answer')[this.checked? 'show' : 'hide']()
});
});
Demo: Fiddle
Or
$(document).ready(function(){
//Register click events to all checkboxes inside question element
$(document).on('click', '.question input:checkbox', function() {
//Find the next answer element to the question and based on the checked status call either show or hide method
var answer = $(this).closest('.question').next('.answer');
if(this.checked){
answer.show(300);
} else {
answer.hide(300);
}
});
});
<label onclick="chkBulk();">
<div class="icheckbox_flat-green" style="position: relative;">
<asp:CheckBox ID="chkBulkAssign" runat="server" class="flat"
Style="position:
absolute; opacity: 0;" />
</div>
Bulk Assign
</label>
function chkBulk() {
if ($('[id$=chkBulkAssign]')[0].checked) {
$('div .icheckbox_flat-green').addClass('checked');
$("[id$=btneNoteBulkExcelUpload]").show();
}
else {
$('div .icheckbox_flat-green').removeClass('checked');
$("[id$=btneNoteBulkExcelUpload]").hide();
}
Source: Stackoverflow.com