[jQuery] Re: Checkbox confusion
Try this... $("#bChecklist input:checkbox").click(function(event){ var item = $(this).parent().text(); alert ( (this.checked ? '' : 'Un') + 'Checked = ' + item); }); On May 8, 1:38 am, mr4d <[EMAIL PROTECTED]> wrote: > Hi all, > > Can't quite get the the following functionality to work: > > 1. when I click on an un-checked checkbox, I want the box to be > checked AND to raise an alert showing the text of the item which has > just been checked. > > 2. Similarly if the user unchecks the box I want to raise an > "unchecked" alert and then have the box unchecked. > > I have been trying to do this for about an hour but the behavior is: > > a. I am getting the "Checked" alert for clicks on both checked > and unchecked checkboxes > b. Once the user checks a box I get the "Checked" alert but the > box never actually gets checked. > > The code is: > > $("#bChecklist > li").click(function(event){ >var item = $(this).text(); >// get the label value > >if ($(this).not(':checked')){ >event.preventDefault(); >alert ('Checking = '+ item) >this.checked = true; // my attempt to > force an unchecked box to be true > // after > using event.preventDefault > } >else if ($(this).is(':checked')) { >event.preventDefault(); >alert ('UnChecking = '+item) >} > }); > > method="post"> > > . > > > > > Bundle Task > > > class=bundleItem />MYTHINGY 1 > > class=bundleItem />MYTHINGY 2 > > class=bundleItem />MYTHINGY 3 > > > > > > > Not quite sure what I am doing wrong. .
[jQuery] Re: Checkbox confusion
Wow!! that worked!!! thanks Next question. . .Why? I am not seeing the flaw in the logic of my broken and obviously less elegant solution. And how did you get away with not having to use event.preventDefault() ??? Also i don't understand why "var item = $(this).parent().text();" returns what I want and not bChecklist. Teach, oh wise friend. Teach indeedafter a week of playing with jquery I must have missed a key concept or 3. On Thu, May 8, 2008 at 1:43 AM, Wizzud <[EMAIL PROTECTED]> wrote: > > Try this... > > $("#bChecklist input:checkbox").click(function(event){ > var item = $(this).parent().text(); > alert ( (this.checked ? '' : 'Un') + 'Checked = ' + item); >}); > > > On May 8, 1:38 am, mr4d <[EMAIL PROTECTED]> wrote: > > Hi all, > > > > Can't quite get the the following functionality to work: > > > > 1. when I click on an un-checked checkbox, I want the box to be > > checked AND to raise an alert showing the text of the item which has > > just been checked. > > > > 2. Similarly if the user unchecks the box I want to raise an > > "unchecked" alert and then have the box unchecked. > > > > I have been trying to do this for about an hour but the behavior is: > > > > a. I am getting the "Checked" alert for clicks on both checked > > and unchecked checkboxes > > b. Once the user checks a box I get the "Checked" alert but the > > box never actually gets checked. > > > > The code is: > > > > $("#bChecklist > li").click(function(event){ > >var item = $(this).text(); > >// get the label value > > > >if ($(this).not(':checked')){ > >event.preventDefault(); > >alert ('Checking = '+ item) > >this.checked = true; // my attempt to > > force an unchecked box to be true > > // after > > using event.preventDefault > > } > >else if ($(this).is(':checked')) { > >event.preventDefault(); > >alert ('UnChecking = '+item) > >} > > }); > > > > > method="post"> > > > > . > > > > > > > > > > Bundle Task > > > > > > type="checkbox" > > class=bundleItem />MYTHINGY 1 > > > > type="checkbox" > > class=bundleItem />MYTHINGY 2 > > > > type="checkbox" > > class=bundleItem />MYTHINGY 3 > > > > > > > > > > > > > > Not quite sure what I am doing wrong. . >
[jQuery] Re: Checkbox confusion
Firstly, you were placing a click handler on the LI, not on the INPUT (the checkbox), so inside the click handler 'this' refers to the relevant LI whose checkbox has been clicked. That's fine for retrieving the text, but the LI doesn't know whether the checkbox is checked or not (as a result of being clicked), so testing the 'checked' property of the LI is not going to tell you anything about the state of the contained checkbox. My solution simply places the click handler on the INPUT (the checkbox) itself, then retrieves the text from the parent LI. Because the click handler is attached to the INPUT, 'this' refers to the clicked checkbox, and I can test the 'checked' property. The text retrieval from parent() only works because all the checkboxes are immediate children of the LI holding the desired text. If more elements were placed between the LI(s) and the checkbox(es) then obviously parent() would have to be changed to something else. You don't need preventDefault() unless you want to stop what would normally happen happening - if you see what I mean. In your case, you are not trying to prevent the checkbox being checked/unchecked when clicked, simply record whether it has become checked/unchecked as a result of being clicked - so you don't want to prevent the natural behaviour of the browser. Hence no need to preventDefault(). On May 12, 5:30 pm, "Chris Cotton" <[EMAIL PROTECTED]> wrote: > Wow!! that worked!!! thanks > > Next question. . .Why? I am not seeing the flaw in the logic of my broken > and obviously less elegant solution. > > And how did you get away with not having to use event.preventDefault() ??? > Also i don't understand why "var item = $(this).parent().text();" returns > what I want and not bChecklist. > > Teach, oh wise friend. Teach indeedafter a week of playing with jquery I > must have missed a key concept or 3. > > On Thu, May 8, 2008 at 1:43 AM, Wizzud <[EMAIL PROTECTED]> wrote: > > > Try this... > > > $("#bChecklist input:checkbox").click(function(event){ > > var item = $(this).parent().text(); > > alert ( (this.checked ? '' : 'Un') + 'Checked = ' + item); > >}); > > > On May 8, 1:38 am, mr4d <[EMAIL PROTECTED]> wrote: > > > Hi all, > > > > Can't quite get the the following functionality to work: > > > > 1. when I click on an un-checked checkbox, I want the box to be > > > checked AND to raise an alert showing the text of the item which has > > > just been checked. > > > > 2. Similarly if the user unchecks the box I want to raise an > > > "unchecked" alert and then have the box unchecked. > > > > I have been trying to do this for about an hour but the behavior is: > > > > a. I am getting the "Checked" alert for clicks on both checked > > > and unchecked checkboxes > > > b. Once the user checks a box I get the "Checked" alert but the > > > box never actually gets checked. > > > > The code is: > > > > $("#bChecklist > li").click(function(event){ > > >var item = $(this).text(); > > >// get the label value > > > >if ($(this).not(':checked')){ > > >event.preventDefault(); > > >alert ('Checking = '+ item) > > >this.checked = true; // my attempt to > > > force an unchecked box to be true > > > // after > > > using event.preventDefault > > > } > > >else if ($(this).is(':checked')) { > > >event.preventDefault(); > > >alert ('UnChecking = '+item) > > >} > > > }); > > > > > > method="post"> > > > > . > > > > > > > > > > > Bundle Task > > > > > > > > type="checkbox" > > > class=bundleItem />MYTHINGY 1 > > > > > type="checkbox" > > > class=bundleItem />MYTHINGY 2 > > > > > type="checkbox" > > > class=bundleItem />MYTHINGY 3 > > > > > > > > > > > > > > > > > Not quite sure what I am doing wrong. .