I've gotten as far as showing a certain div based on the selection of "150" and "3m" but I can't get the div to hide if both of those aren't selected?
Code below:
$(document).ready(function() {
$('input[value="100"], input[value="3m"]').change(function() {
if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
$('div').show();
} else {
$('div').hide();
}
});
});<script src=".1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" />
<label>150</label>
<input class="amount" type="radio" name="amount" value="150" />
<br>
<br>
<label>3</label>
<input class="month" type="radio" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" value="6m" />
<div style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>I've gotten as far as showing a certain div based on the selection of "150" and "3m" but I can't get the div to hide if both of those aren't selected?
Code below:
$(document).ready(function() {
$('input[value="100"], input[value="3m"]').change(function() {
if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
$('div').show();
} else {
$('div').hide();
}
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" />
<label>150</label>
<input class="amount" type="radio" name="amount" value="150" />
<br>
<br>
<label>3</label>
<input class="month" type="radio" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" value="6m" />
<div style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>- 1 try with this $('input[value="100"], input[value="3m"],input[value="150"], input[value="6m"]') – shubham khandelwal Commented Sep 15, 2016 at 12:47
- Sorry, I only want it to show if you choose "100" and "3m", I'll amend the question now. – user3181828 Commented Sep 15, 2016 at 12:49
7 Answers
Reset to default 4Currently you're only updating the visibility of the div elements when the 100 or 3m radio button is changed - you want to update the visibility of the div elements on any radio button change by changing your selector:
$('input[value="100"], input[value="3m"]')
to
$('input')
$(document).ready(function() {
$('input').change(function() {
if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
$('div').show();
}
else {
$('div').hide();
}
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" />
<label>150</label>
<input class="amount" type="radio" name="amount" value="150" />
<br><br>
<label>3</label>
<input class="month" type="radio" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" value="6m" />
<div style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>For radio buttons, the change event is only triggered when the button gets checked, not when it gets unchecked.
A possible solution is to bind the change event to all (involved) inputs.
$(document).ready(function() {
$('input').change(function() {
if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
$('div').show();
}
else {
$('div').hide();
}
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" />
<label>150</label>
<input class="amount" type="radio" name="amount" value="150" />
<br><br>
<label>3</label>
<input class="month" type="radio" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" value="6m" />
<div style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>I would do it like the following using the filter function and the :checked selector:
// wrap in closure
$(function() {
// store these in variables for better performance
var month = $('.month'),
amount = $('.amount'),
toggleDiv = $('#toggle-div'); // give top level div to show an id rather than toggling all divs
// use mon class on radios you want to bind the event to
$('.radio').on('change', function() {
if (amount.filter(':checked').val() == 100 && month.filter(':checked').val() === "3m") {
toggleDiv.show();
} else {
toggleDiv.hide();
}
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount radio" type="radio" name="amount" value="100" />
<label>150</label>
<input class="amount radio" type="radio" name="amount" value="150" />
<br>
<br>
<label>3</label>
<input class="month radio" type="radio" name="month" value="3m" />
<label>6</label>
<input class="month radio" type="radio" name="month" value="6m" />
<div id="toggle-div" style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>You need to put all the radio buttons id or name to do the functionality
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" id="100rad"/>
<label>150</label>
<input class="amount" type="radio" id="150rad"name="amount" value="150" />
<br><br>
<label>3</label>
<input class="month" type="radio" id="3mrad" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" id="6mrad" value="6m" />
<div style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>
js
$(document).ready(function() {
$('#3mrad, #150rad,#100rad,#6mrad').change(function() {
if ($('#150rad').is(':checked') && $('#3mrad').is(':checked')) {
$('div').show();
}
else {
$('div').hide();
}
});
});
check the fiddle and let me know that it is what you required or not
Fiddle
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='gender']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
if(radioValue=='male'){
$("#divMale").show();
$("#divFemale").hide();
}
else{
$("#divMale").hide();
$("#divFemale").show();
}
});
Use the following javascript code instead. . .set change listener on input[name="month"], input[name="amount"]
$(document).ready(function() {
$('input[name="month"], input[name="amount"]').change(function() {
console.log("haha")
if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
$('div').show();
}
else {
$('div').hide();
}
});
});
If you are using bootstrap css, you can even make the code much more portable.
$(document).ready(function () {
$('input.rbtoggle').change(function () {
$('div.dvtoggle').toggleClass('d-none');
});
});
where 'rbtoggle' is just a class your radio buttons share, while 'dvtoggle' is a class the div to show or hide uses.
If you want the div hidden initially, add the class 'd-none' to it. E.g
<div class'dvtoggle d-none'>
<!-- other html goes here -->
</div>