Home/ Questions/Q 8910891
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T03:48:32+00:00

I have shown the problem at http://jsfiddle.net/7ZpCW/1/ I have implemented the code such that

  • 0

I have shown the problem at http://jsfiddle.net/7ZpCW/1/

I have implemented the code such that when I click on checkbox or text next to it, checkbox should be selected/de-selected depending upon its previous state.

The problem is when I click on text, though checkbox is getting checked but the alert message is getting executed only the number of times the previous checkboxes were selected.

While when I click on checkbox alert message is executed based on current state.

Screenshot

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<span id="MYARRAYloader_collapse" class = "w195"  style="display:block">
<div class="sp15">&nbsp;</div>

<div class="lf  fs12 lh15" style="padding-left:10px;">
<input type="checkbox" name="MYARRAY[]" id="MYARRAY0"  value="ALL"  checked  class="chbx checkbox-selector1">
<a href="#" class="checkbox-selector" style="color:#5B5B5B;">All</a> 
<br>
<input type="checkbox" name="MYARRAY[]"  value="V"  class="chbx checkbox-selector1">
<a href="#" class="checkbox-selector" style="color:#5B5B5B;">Opt1</a> 
<span class="gray t11">(42)</span>
<br>
<input type="checkbox" name="MYARRAY[]"  value="N"  class="chbx checkbox-selector1">
<a href="#" class="checkbox-selector" style="color:#5B5B5B;">Opt2</a> 
<span class="gray t11">(38)</span>
<br>
</div>
<div class="sp12">&nbsp;</div>
</span>

<script>
$('.checkbox-selector').click(function() {
var chb = $(this).prev();
chb.click();
return false;
})
$('.checkbox-selector1').click(function() {
var chb , chb1 , action;
chb= $(this); 
clusterName = chb.attr('name');
clusterVal = chb.attr('value');

var array = new Array();


$('input[name="'+clusterName+'"]:checked').each(function(i,el){
alert('Count Me');
chb1 = $(this); 

if(clusterVal == 'ALL')
{
if(chb1.attr('value')!='ALL')
{
chb1.attr("checked","");
}
else
array.push($(el).val());
}
else
{
if(chb1.attr('value')=='ALL')
{
chb1.attr("checked","");
}
else
{
array.push($(el).val());
}
}
});

});
</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are seriously convoluting this problem. You can make the text clickable simply by wrapping the checkbox and text in a label.

    <label><input type="checkbox" /> This is some text</label>
<label><input type="checkbox" /> This is some text</label>
<label><input type="checkbox" /> This is some text</label>

    jsFiddle: http://jsfiddle.net/7ZpCW/
    ​

    You should really format your code like this to make it more semantic. But you won’t. So you can fix your code by replacing this:

    $('.checkbox-selector1').click( ... );

    with this:

    $('.checkbox-selector1').change( ... );

    jsFiddle: http://jsfiddle.net/7ZpCW/2/

    • 0