Is there any event, to append to the following listener, that will tell me if a radio button is already clicked?
var budgetType;
$(document).on('change', 'input[name="import_export"]', function() {
console.log($(this))
budgetType = $(this).val();
});
My problem is that, on page reload, if the radio box is already checked, the change listener won't work, and I didn't find any listener that will help me with that issue.
Any ideas?
Update
I'm aware that I could write an if/else syntax and see which is checked, but I was wondering if there is any other listener that I could append to change one, and avoid writing that extra syntax.
http://jsfiddle.net/S93XB/1/
$('input[type=radio]').is(':checked')
Try this code here: http://jsfiddle.net/afzaal_ahmad_zeeshan/rU2Fc/
or try this one
$('input[type=radio]').prop('checked', true);
Try this code here: http://jsfiddle.net/afzaal_ahmad_zeeshan/rU2Fc/1/
It will work, you can execute this onload to get the first value and use it in an if else block.
Trigger the change event on load:
var budgetType;
$(document).on('change', 'input[name="import_export"]', function() {
var isChecked = $(this).is(":checked");
console.log($(this).val()+" "+isChecked);
budgetType = $(this).val();
});
$('input[name="import_export"]:checked').trigger('change');
http://jsfiddle.net/eLGaB/
Try this :
$('input[type=radio]').is(':checked')
Or
$('input[type=radio]').prop('checked') === true;
Or
$('input[type=radio]').attr('checked') === 'checked';
Related
guys. I have a problem that i can't resolve. I need to switch the behavior using ".on/.off" methods that will be working when i set or remove the tick from the checkbox. How can i do that?
For example: I have a button that will be zooming in/change color/moving by pressing on it. But when i set the tick on one of a checkboxes, i need to disable this event from the button using ".off" method.
I tried like
$(".button").on('click', function(){
$(this).toggleClass('active');
});
$(".button2").on('click', function(){
$(this).toggleClass('active2');
});
$(".button3").on('click', function(){
$(this).toggleClass('active3');
});
$(".button4").on('click', function(){
$(this).toggleClass('active4');
});
var check = $("#check");
check.change(function(){
if ($(this).is(':checked'))
{
$('.button').off('click');
}
});
but for some reason it will disable my event until i refresh the page, even if i remove the tick from one of my checkboxes
Thanks in advance.
This is happening because when you tick the checkbox, your code will remove the click listener from the .button element and you're not setting it back when the checkbox is unchecked.
So, if you want the click listener on the .button element to fire again when the checkbox is unchecked, you can do any one of the two things as mentioned below.
First, you can add an else block after the if block in the change listener of checkbox. Following code will work for this approach:
var check = $("#check");
check.change(function(){
if ($(this).is(':checked')) {
// This will remove the click listener from the button if checkbox is checked
$('.button').off('click');
}
else {
// This will again add the click listener to the button if checkbox is not checked
$(".button").on('click', function(){
$(this).toggleClass('active');
});
}
});
But I will not recommend the above approach because it will unnecessarily increase the size of code.
Here's the second and a better approach. Inside the click event handler function, you can add an if statement to check if the checkbox is ticked. Below is the code for the same:
$(".button").on('click', function(){
if (! $("#check").is(':checked')) {
// This will only be fired if checkbox is not checked
$(this).toggleClass('active')
}
});
You can add this if to any other block according to your requirement.
The main advantages of using the above code are:
Code will not be increased as compared to 1st approach
You don't need a change listener for the checkbox (Yeah! Just remove it!)
I'm working with Sharepoint and am creating a list with injected Javascript and JQuery. I'm trying to keep a field hidden unless the user selects "Deferred" or "Removed" from a field above with a dropdown. I want this to happen with an OnChange event, however, I believe this OnChange event should be within the OnLoad event.
Here's the code so far:
_spBodyOnLoadFunctionNames.push("myFunction");
function myFunction(){
$("h3.ms-standardheader:contains('Status Justification')".closest("tr").hide();
var StatusVal = $('select[id*=Status]').val();
if (StatusVal == 'Not Started' || StatusVal == 'Deferred'){
$("h3.ms-standardheader:contains('Status Justification')".closest("tr").show();
---THIS SHOULD ONLY HAPPEN ONCHANGE FOR STATUS DROPDOWN---
)
};
How can I use something like:
$('select'.on('change', function() {
alert($(this).find(":selected").val());
});
to make Status Justification only show when Status is changed to "deferred" or "removed"?
$('select').on('change', function() { // whenever values are changed in dropdown, this will be called.
if($(this).val() == 'deferred') { // example: run some code when value selected is 'deferred'
// code goes here...
}
});
And you need not have above code inside $(document).ready(function(){ ..
checkbox can not checked or uncheck by directly click on checkbox ?
i was create click on div for toggle checked/unchecked checkbox. this function was best.
But when i tried to click on checkbox directly, i can not check or uncheck checkbox.
How can i do that ?
https://jsfiddle.net/jddwxtst/
<script>
function onclick_cover_checkbox_fn(){
var main_checkbox_checked_uncheck_var = document.getElementById("main_checkbox_checked_uncheck");
var main_checkbox_checked_uncheck_var_checked_status = main_checkbox_checked_uncheck_var.checked;
if(main_checkbox_checked_uncheck_var_checked_status != true)
{
document.getElementById("main_checkbox_checked_uncheck").checked = true;
checked_all_or_uncheck_all_fn();
}
else
{
document.getElementById("main_checkbox_checked_uncheck").checked = false;
checked_all_or_uncheck_all_fn();
}
}
</script>
<script>
function checked_all_or_uncheck_all_fn(){
alert("5555");
}
</script>
Here is a example in jquery:
Bind a change handler, then just uncheck all of the checkboxes, apart from the one checked:
$('input.example').on('change', function() {
$('input.example').not(this).prop('checked', false);
});
Here's a fiddle
here is the updated working example https://jsfiddle.net/jddwxtst/2/
problem is when you directly click on the checkbox it first run checked_all_or_uncheck_all_fn() method but then it execute onclick_cover_checkbox_fn() method too (you don't need) because div also receive click event.so if you check then method onclick_cover_checkbox_fn() method will uncheck it .to avoid this you shroud stop event propagating in checked_all_or_uncheck_all_fn() method.
function checked_all_or_uncheck_all_fn(e){
alert("5555");
// stop event propagating
}
for cross browser stop propagating read this http://javascript.info/tutorial/bubbling-and-capturing
I want to trigger a programmatically checked checkbox. eg:
$(function(){
//create a trigger that if a checkbox changes, eg is clicked/change show an alert
$("#idCheckbox").on("change", function(){
if($(this).is(':checked')){
alert("Is checked!");
}
});
//onload put it checked
$("#idCheckbox").attr("checked", "checked");
});
The 'problem' is that if I check on load the checkbox by javascript the on() method is not triggered, and the alert is not shown.
The code above is an example, in fact the script which check the checkbox is not mine and I can't modify it.
I am using jQuery 1.8.0
Any suggestion?
Thanks in advance.
Rather than setting the attribute to checked you can call click() on the checkbox to trigger the the event you had bound previously
$(function(){
var $checkbox = $("#idCheckbox");
$checkbox.on("change", function(){
if(this.checked){
alert("Is checked!");
}
});
$checkbox.click();
});
example: http://jsfiddle.net/hunter/wpLb2/
You can move your inline defined function to global scope and call it:
function checkBoxClick(){
if($(this).is(':checked')){
alert("Is checked!");
}
}
$(function(){
//create a trigger that if a checkbox changes, eg is clicked/change show an alert
$("#idCheckbox").on("change", checkBoxClick);
// Trigger your click function
checkBoxClick();
//onload put it checked
$("#idCheckbox").attr("checked", "checked");
});
When a checkbox is checked programmatically using javascript, onchange event does not get fired automatically. So the script that marks the checkbox as checked should call onchange event.
I have this jQuery script that works fine:
$("select").change(function () {
var finalPrice = 0;
$("select option:selected").each(function () {
if ($.cookie('descuentoGen') != null){
finalPrice = Math.floor(precios[$(this).index()]*$.cookie('descuentoGen'));
} else{
finalPrice = precios[$(this).index()];
}
});
$("#precioFinal").text(finalPrice);
})
.trigger('change');
As you can see, it simply does some action when the user selects another option in the select.
Now, in a different script I'm calling this:
document.getElementById('selectFoods').selectedIndex = t;
This works as it should since it actually changes the selected option, the problem is, that why I change the selected option this way, the actions from the initial jQuery script are not executed.
Is there any way around this or will I have to duplicate the jQuery script behaviour in the other script?
Just try this
$('#selectFoods').prop('selectedIndex', t).change();
DEMO
Using selectedIndex will not trigger a change event. You've to trigger it by yourself.
I think you will have to trigger the event yourself, as i could know there's no a listener that tracks every select box's selectedIndex so that when selectedIndex changes the js engine could trigger the event. that is to say, it is the default change() behavior that changes the selectedIndex, but not contrary.