[jQuery] Checkbox confusion
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)
}
});
<form id="myForm" name="myForm" action="/cm/BaB/create/"
method="post">
.....
<div class="row" id="div2">
<fieldset id="bundleFields"> <!-- Add dynamically -->
<legend id="bundleLegend" >Bundle Task</legend>
<ul class="bChecklist" id="bChecklist">
<li><label for="o1"><input id="o1" name="o1" type="checkbox"
class=bundleItem />MYTHINGY 1</label></li>
<li><label for="o2"><input id="o2" name="o2" type="checkbox"
class=bundleItem />MYTHINGY 2</label></li>
<li><label for="o3"><input id="o3" name="o3" type="checkbox"
class=bundleItem />MYTHINGY 3</label></li>
</ul>
</fieldset>
</div><br clear="all"/>
</form>
Not quite sure what I am doing wrong. .