[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. .
