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
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 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.
check out this fiddle: http://jsfiddle.net/5rmEe/61/
var inputVal = false;
//allow user to deselect a radio button by clicking a checked radiobutton
$('input[type=radio]').each(function(){
var inputObj = $(this);
inputObj.click(function(e){
if(inputVal === inputObj.val()){
inputVal = false;
inputObj.attr('checked', false);
}
else{
inputVal = inputObj.val();
inputObj.attr('checked', 'checked');
}
e.stopPropagation();
});
});
$('.asdf').click(function(){
$('.haha').trigger('click');
});
notice that the asdfsdaf span would trigger a click on the radio button
First of all, the radio button is set such that if you click on a checked radio button it will uncheck itself (try it out) and this works when clicking on the radio button itself
now If you click on the span, it'll make the checkbox check itself properly but then if you click on the span again it will NOT set the radio button as unchecked even though evidently it performs a click event and theoretically it should uncheck the radio button accordingly due to the click event (this event works if you actually click on the radio button)
why is this happening? is the attr() method not working if the event is manually triggered using .trigger()?
how can I resolve this such that clicking on the span would ALSO trigger an uncheck in the radio button when the radio button is checked?
Use triggerHandler instead of trigger.
$('.haha').triggerHandler('click');
This will cause the handler to be fired without causing the default behavior of the click.
You can prevent the default click action by calling preventDefault() from within your click handler, like so:
inputObj.click(function(e){
e.preventDefault(); //add this to prevent default click behaviour
if(inputVal === inputObj.val()){
inputVal = false;
...
...
See working fiddle
I've looked at and tried numerous answers on this topic but can't seem to find a solution that works. I might be missing something obvious in which case I apologise but here's my problem:
I have a checkbox nested within a DIV element, this DIV element has a jQuery click event attached to it which then checks whether the checkbox is checked or not and then either checks/unchecks it. Depending on whether it has been checked/unchecked it then sends a variable to a PHP script to add into a session variable.
This all works fine when it's the DIV that has been clicked but when the checkbox is clicked I think some bubbling occurs as it fires the event for unchecking the checkbox every time. I've tried using stopPropogation(); and preventDefault(); attached to the checkbox click event but to no avail.
Here's some sample code to try and make this clearer:
Checkbox HTML code:
<div class='bundle_offer' id='bundle_offer_0'>
<input type="checkbox" />
</div>
Click function:
// Click function on bundle offer div to add booster
$(".bundle_offer").click(function (event) {
// IF its not the checkbox clicked, send over the div id
if (event.target.type !== 'checkbox') {
var bundle_offer_div_id = "#"+this.id;
bundle_offer_click(bundle_offer_div_id);
}
// ELSE find div id and send it
else{
var bundle_offer_div_id = $(this).closest(".bundle_offer").attr("id");
bundle_offer_div_id = "#"+bundle_offer_div_id;
bundle_offer_click(bundle_offer_div_id);
}
}); // end bundle offer click function
the bundle_offer_click function simply takes the id of the DIV clicked, finds the checkbox, checks/unchecks it and then sends the appropriate variable to the PHP script via AJAX.
EDIT:
I managed to fix the problem by moving round the logic a bit, here is what I changed it to:
// Click function on bundle offer div to add booster
$(".bundle_offer").mouseup(function (event) {
// Get whether checked or not
var isChecked = $(this).find('input').is(':checked');
// IF its not the checkbox clicked
// check/uncheck
// send over the div id
if (event.target.type !== 'checkbox') {
if(isChecked == false){
// Check
$(this).find('input').attr('checked',true);
}
else{
// Uncheck
$(this).find('input').attr('checked',false);
}
var bundle_offer_div_id = "#"+this.id;
bundle_offer_click(bundle_offer_div_id, isChecked);
}
// ELSE find div id and send it
else{
var bundle_offer_div_id = $(this).closest(".bundle_offer").attr("id");
bundle_offer_div_id = "#"+bundle_offer_div_id;
bundle_offer_click(bundle_offer_div_id, isChecked);
}
}); // end bundle offer click function
Main difference is using the mouseup function instead and doing the logic for checking/unchecking the checkbox within that mouseup function rather than the bundle_offer_click one.
In case you click on check box browser automatically check/uncheck checkbox. you don't need do that using JavaScript.
I believe inside bundle_offer_click you are checking/unchecking checkbox. you should pass a flag as second parameter in bundle_offer_click flag value should be depend on clicked element. and inside bundle_offer_click based on flag take action on checkbox.
code:
function bundle_offer_click(id, isCheckBoxClicked){
if(isCheckBoxClicked){
//do nothing on check box
}
}
I have links that when clicked, select all the checkboxes or deselect them.
I also have a dropdown list that I want to be made visible only if at least one of the checkboxes are selected.
What is the best way to do this?
Should I write login inside the code that selects/deleselects them or is there a better way to do this?
I would have a function that sets the dropdown's visibility. I would call this function from the click handlers for each of the checkboxes and from the link's handlers -- I'm assuming that your link handlers don't merely fire a click event on each box, but set it's status. Unless you have other behavior to trigger firing the click event on each checkbox will be very expensive. In your function that set's visiblity, use a test to see if the number of checked boxes is greater than 0 as the new state for the visibility.
function setDDVisibility() {
var isVisible = $('.checkbox-class-selector:checked').length > 0;
if (isVisible) {
$('#ddl').show();
}
else {
$('#ddl').hide();
}
}
$('.checkbox-class').click( function() {
... do stuff ...
setDDVisibility();
return false;
});
$('.link-selector').click( function() {
...set up checkboxes...
setDDVisibility();
return false;
});