I have this:
$('input.people').attr('checked', function() {
return $.inArray(this.name, ['danB', 'lindaC']) != -1;
});
It is for a list of contacts. I want to be able to have the user click a checkbox that will select the people in a specific role and uncheck everyone else. That works. Now I want to modify this so that if someone unclicks the same checkbox that it deselects those people (and only those people). Would that be an onBlur event?
I'm thinking something like this:
$('input.people').attr('checked', function(){
return $.inArray(this.name, ['danB', 'lindaC']) != 1;
});
or would it be:
$('input.people').attr('checked', function(){
return $.inArray(this.name, ['danB', 'lindaC']) = -1;
});
And how would I integrate this with the top function? A shout out, btw, to Nick Craver for his help to date.
$('input.people').change(function ()
{
if(!$(this).hasClass("checked"))
{
//do stuff if the checkbox is checked
$(this).addClass("checked");
return;
}
//do stuff if the checkbox isn't checked
$(this).removeClass('checked');
});
Related
On my page I have a checkboxes like this:
<input id="check0" type="checkbox">
Each time user check or uncheck it I want to execute some jQuery code. Here's sample of this code:
$("input[type=checkbox]").click(function () {
if ($(this).is(':checked')) {
// Calculate something here
}
else {
// Or calculate something here
}
});
Here's the problem: if user will click on checkbox multiple time really quick, some of the code will be executed multiple times, because it will trigger click function every time, but browser will not change 'check' status that quick!
How to prevent this?
I thought to put something like:
$("input[type=checkbox]").click(function () {
if ($(this).is(':checked')) {
// Disable checkbox
$(this).disabled = true;
// Calculate something here
// Enable it back
$(this).disabled = false;
}
else {
// Or calculate something here
}
});
How can I make my code to execute exact in this sequence? Disable > then execute code > then enable back?
Thanks
You should use on change, not on click. Then check the prop checked. If checked, run code. If you want to disable, use attr.
Try this...
$("#check0").on("change", function () {
if($(this).prop("checked") == true){
alert("hey now");
$(this).attr("disabled","disabled");
} else {
//nothing
}
});
http://jsfiddle.net/Eddieflux/z3xfcmgk/
I have a couple of checkboxes and a button. When I click on checkbox - function is triggered. This is the desired behavior but I want to trigger it by clicking on the button. I want to have the possibility to first select checkboxes (I tried with return false and event.preventDefault but these completely switch the selection off) and then by clicking the button - trigger functions from checkboxes. Here is a link to jsfiddle:
http://jsfiddle.net/j93k2xns/6/
So for instance: I can select 3 checkboxes (nothing should happen) and after I click the button - three alerts should appear.
The code:
HTML:
<input type="checkbox" name='check[]' id="first">first</input>
<input type="checkbox" name='check[]'>second</input>
<input type="checkbox" name='check[]'>third</input>
<input type="checkbox" name='check[]'>fourth</input>
<input type="button" value="validate" id="val-button">
JS:
var check_state;
$(document).on('click','input[name="check[]"]', function(e){
if(check_state === true) {
alert('a');
} else {
return false;
}
});
$(document).on('click','#val-button', function(){
check_state = true;
});
There are a few interpretations to his question. If I'm reading it correctly, he wants to bind an arbitrary function to the checkboxes. Clicking the button should fire this event. This is how you can achieve that using custom events in jQuery:
$(function () {
$("input[name='check[]']").bind("myCustomButtonClick", function() {
if(this.checked) {
alert('a');
}
});
})
$(document).on('click','#val-button', function(){
$("input[name='check[]']").trigger("myCustomButtonClick");
});
And the associated jsfiddle: http://jsfiddle.net/3yf7ymos/
$(document).on('click','#val-button', function(){
$( 'input[name="check[]"]' ).each(function( index ) {
if($(this).is(':checked')) {
alert("a");
return true;
}
});
});
If you want to do something when the user checks a checkbox, add an event listener:
$('input[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
// do something
}
});
If the idea is run a couple of functions after the inputs are checked by clicking on a button:
function myFunction() {
if ($('input[id="something"]:checked').length == 0) {
// do something
} else if ($('input[id="something_2"]:checked').length == 0) {
// do something
}
//and so on..
}
$('#val-button').click(function() {
myFunction();
});
I have a similar inquiry. I have a number of check boxes. Each checkbox is linked to a different URL that opens a PDF form. I want my team to be able to select which forms they need by ticking the checkbox. Once they have done that, I would like a button to trigger the opening of each form based on which check box is checked. I have it so the checkbox upon being checked opens the form right away but it is very distracting. Its preferable they all get opened at once by a "button". Help. I am quite new to JavaScript so may need additional clarity.
i want do something like this with a checkBox. if the user clicks on the checkbox, it should change its state (checked -> unchecked and vv. ).
my code:
$('#checkBoxStandard').change(function() {
clickedFormBoxen('standard');
});
function clickedFormBoxen(active){
if(active == 'standard'){
if( $('#checkBoxStandard').is(":checked")){
$('#checkBoxStandard').prop("checked", false);
}else{
$('#checkBoxStandard').prop("checked", true);
}
console.log('ac: '+$('#checkBoxStandard').is(':checked'));
}
Unfortunately, the checkbox will not be unchecked again. The fist time, the checkbox is getting checked, but if i click on it again, nothing happens, it's still checked.
I wish to use this code so i can change the state of the checkbox by function call and not just by user interaction.
Please help me and sorry for my english^^
Try
$('#checkBoxStandard').removeAttr("checked");
You mean something like this? (jsFiddle)
HTML
<input type="checkbox" id="checkbox">
<label for="checkbox">Hey,check me!</label>
JavaScript
var respond = true;
function manualCheck(state)
{
respond = false;
$('#checkbox').prop("checked", state);
}
$('#checkbox').change(function ()
{
if (!respond)
{
respond = true;
return;
}
// Your code
}
As i've mentionend in my comment to your question, with your function clickedFormBoxen you effectively revert the effect of a user interaction on the checkbox element. Thus it seems that you have to call the change handler from a click handler on your checkbox element (i've streamlined the code a bit):
function clickedFormBoxen(active) {
if (active == 'standard') {
$('#checkBoxStandard').prop("checked", !($('#checkBoxStandard').prop("checked")));
}
}
$(document).ready( function(){
$('#checkBoxStandard').change( function(e) {
clickedFormBoxen('standard');
1;
});
$('#checkBoxStandard').click(function(e) {
$('#checkBoxStandard').change();
1;
});
});
I'm trying to do something like this answer: https://stackoverflow.com/a/6256910/1641189
However I want to do it with multi-select fields since they provide scroll bars.
Instead of having each item move as soon as it's clicked, like the answer link above, I am going to have two buttons between the two select fields.
Something like this: http://www.kj4ohh.com/stuff/selectfields.png
How would I do this in javascript/jquery?
How would I return the contents of both select fields back to my flask application?
EDIT:
I had tried the following javascript:
function assign(form)
{
for(i=0;i<form.unassigned.length;i++) {
if (form.unassigned.options[i].selected == true) {
form.assigned.add(form.unassigned.options[i]);
form.unassigned.remove(i);
}
}
//unselect all items
form.assigned.selectedIndex = -1
}
function unassign(form)
{
for(i=0;i<form.assigned.length;i++) {
if (form.assigned.options[i].selected == true) {
form.unassigned.add(form.assigned.options[i]);
form.assigned.remove(i);
}
}
//unselect all items
form.unassigned.selectedIndex = -1
}
but with strange results:
With this script, if you select an item from either select field and hit the appropriate assign/unassign button it works corectly.
If you select two items, only one is moved.
If you select more than two, one is moved, one stays put and the rest vanish.
However if I add an alert() line outputting the current selection being observed, it will produce an alert box for each item selected correctly.
You have to use jquery plugin for better result
http://loudev.com/
You may try this
$(function(){
$('#toSel1, #toSel2').on('click', function(){
if($(this).attr('id')=='toSel2')
{
var l=$('#sel1 option:selected').length;
if(!l) {
alert("Option not selected !");
return false;
}
$('#sel1 option:selected').each(function(){
$('#sel2').append($(this));
});
}
else
{
var l=$('#sel2 option:selected').length;
if(!l) {
alert("Option not selected !");
return false;
}
$('#sel2 option:selected').each(function(){
$('#sel1').append($(this));
});
}
});
});
DEMO.
Here an example of my checkbox list http://jsfiddle.net/YnM2f/
Let's say I check on G then A,B,C,D,E,F also automatic checked. How can i achieve my goals with jQuery?
First you need to get all the checkboxes based on which one is clicked. for this you need to get the parent nodes, siblings that are before it. Here is some code that will help you get there, but you'll need to work on it to make it work for you.
http://jsfiddle.net/urau8/
$("input:checkbox").on("click",function(){
if(this.checked)
$(this).parent().prevAll().each(function(){
$("input:checkbox",this).attr("checked",true);
});
});
This will check all checkboxes above a checkboxe that gets checked and uncheck all checkboxes above a checkbox that gets unchecked, given the checkbox layout that you've provided.
$('input:checkbox').click(function () {
var state = $(this).prop('checked');
var elements;
if (state) {
elements = $(this).parent().prevAll();
} else {
elements = $(this).parent().nextAll();
}
elements.each(function () {
$('input:checkbox', this).prop('checked',state);
});
});
$('input:checkbox').change(function(){
var $allParents = $(this).parent();
$allParents.prevAll().find('input').attr('checked', 'checked');
$allParents.nextAll().find('input').removeAttr('checked');
});
Try this
Well it's already been done five times, but this is what I did: http://jsfiddle.net/YnM2f/27/
$('input').click(function(){
if( $(this).is(':checked') ){
$(this).parent('p').prevAll().children('input').attr('checked',true)
}
})
Try something like this: http://jsfiddle.net/YnM2f/16/
It's a very specific solution (as in it will only work with "G"), but it should give you an idea for how to customize this code to meet your needs.
$('input:checkbox').filter(function(){
return (/ G/).test($(this).parent().text())
}).on('change', function() {
var gBox = $(this);
$('input:checkbox').prop('checked', $(gBox).prop('checked'));
});