Click here to Skip to main content
15,302,859 members
Please Sign up or sign in to vote.
3.00/5 (2 votes)
See more: , +
XML
<asp:CheckBoxList ID="chkFlow" runat="server" onchange="fnchkFlow(this);">
                    <asp:ListItem Value="1" Text="Flow"></asp:ListItem>
                    <asp:ListItem Value="2" Text="STAT"></asp:ListItem>
                </asp:CheckBoxList>


i want to check and uncheck the listitem at the same time with their text or value

how to do it.

Please help
Thanks


EDIT: AL.

If 'flow' is checked then 'Stat' is enabled. If 'flow' is unchecked, then 'stat' must be unchecked and disabled
Posted
Updated 8-Aug-16 22:53pm
v2
Comments
Andy Lanng 18-May-15 9:33am
   
The question is vague.

Please explain further what you mean and why you need to do it, please.
itsathere 18-May-15 9:43am
   
1. if listitem "Flow" will be checked then i can check "STAT" also.but without checking "Flow" i can not check "STAT".

2. If i have checked "Flow" and "STAT" also and then when i will uncheck "Flow" then i have to uncheck "STAT" also because without checking "Flow" i can not check "STAT".
Andy Lanng 18-May-15 9:46am
   
Please use the reply button. Otherwise I won't get notified that you have posted.

Ok. I understand what you mean now. Please approve my changes to your question
itsathere 18-May-15 9:50am
   
what do u mean?
If u have idea give then give me the javascript of the logic of onchange event


Andy Lanng 18-May-15 9:55am
   
I changed your question. I will also write a solution.
Andy Lanng 18-May-15 9:51am
   
New question:
Do you need this in javascript (clientside) or in the code-behind (C#)?
itsathere 18-May-15 9:54am
   
in javascript (clientside)
itsathere 18-May-15 10:00am
   
I need this in javascript because i have tried code behind.Code behind take time to check and uncheck that's why i wanna use javascript.
Andy Lanng 18-May-15 10:03am
   
no problem - solution on it's way. do you use jQuery?

This solution uses jQuery. If you don't use jQuery, I suggest you include it.

C#
function fnchkFlow(this){
 
  //first get the jQuery version of the listbox
  var listbox = $(this);

  //make sure we have something (basic error checking)
  if(listbox && listbox.length)
  {
    //find the items you're looking at
    //var optionFlow = $(listbox).find("option[value='1']);
    //var optionStat = $(listbox).find("option[value='2']);

    //whoops - they are not "options"
    
    //These selectors should work.
    var optionFlow = $(listbox).find("input[type='checkbox'][value='1']);
    var optionStat = $(listbox).find("input[type='checkbox'][value='2']);

    //more of that basic error checking
    if(optionFlow && optionFlow.length &&  optionStat && optionStat.length)  
    {
      if($(optionFlow).is(":checked"))
      {
        $(optionStat).prop('disabled',false);
      }
      else
      {
        $(optionStat).prop('checked',false);
        $(optionStat).prop('disabled',true);
      }
    }
  }
}
   
v2
Comments
itsathere 18-May-15 10:41am
   
Have u test the javascript.It's not working
Andy Lanng 18-May-15 10:42am
   
In what way is it not working?
Can you debug it in Chrome or firebug?
itsathere 18-May-15 10:43am
   
Yea i m testing it on chrome.
Andy Lanng 18-May-15 10:44am
   
so...
In what way is it not working?
itsathere 18-May-15 10:54am
   
It never go inside
if(optionFlow && optionFlow.length && optionStat && optionStat.length)
condition.When i remove the above condition then it always follow below else condition

if($(optionFlow).is(":checked"))
{
$(optionStat).prop('disabled',false);
}
else
{
$(optionStat).prop('checked',false);
$(optionStat).prop('disabled',true);
}
Andy Lanng 18-May-15 10:56am
   
This is that 'basic error handling'.
If it never goes past 'if(optionFlow && optionFlow.length && optionStat && optionStat.length)' then something is wrong with the selection.
Can you tell me the value of 'optionFlow' and 'optionStat ' at this point?
itsathere 18-May-15 11:02am
   
var optionStat = $(listbox).find("option[value='2']");

optionStat shows below

context: undefined
length: 0
prevObject: jQuery.fn.jQuery.init[1]
selector: "option[value='2']"
__proto__: jQuery[0]

var optionFlow = $(listbox).find("option[value='1']");

optionFlow shows like below
context: undefined
length: 0
prevObject: jQuery.fn.jQuery.init[1]
selector: "option[value='1']"
__proto__: jQuery[0]
Andy Lanng 18-May-15 11:11am
   
Oh - I see the problem >_<

the javascript depends on the html output. Could you please post the html markup as it appears in a browser for the checkboxlist control.

I will correct the solution once I have read the markup
itsathere 18-May-15 11:13am
   
<table id="chkFlow" >
<tbody><tr>
<td><input id="chkFlow_0" type="checkbox" name="chkFlow$0" value="1"><label for="chkFlow_0">Flow</label></td><td><input id="chkFlow_1" type="checkbox" name="chkFlow$1" value="2"><label for="chkFlow_1">STAT</label></td>
</tr>
</tbody></table>
Andy Lanng 18-May-15 11:23am
   
ok - solution updated.

The selectors where looking for the wrong items. I was looking for select options when I should have been looking for checkboxes
itsathere 18-May-15 11:26am
   
I have done it myself

Below is the javascript
<script>
function fnchkFlow() {
debugger;
var str = "1,2";
var items = $('#<% = chkFlow.ClientID %> input:checkbox');
for (var i = 0; i < items.length; i++)
{
if (items[0].checked == true) {
items[i].checked = true;
break;
}
else {
items[1].checked = false;
}
}

}
</script>
Andy Lanng 18-May-15 11:31am
   
Awesome. Good work. I'm glad you found your own solution ^_^
itsathere 18-May-15 11:33am
   
yeah, anyways thanks.
C#
<script>
function fnchkFlow() {
var items = $('#<% = chkFlow.ClientID %> input:checkbox');
for (var i = 0; i < items.length; i++)
{
if (items[0].checked == true) {
items[i].checked = true;
break;
}
else {
items[1].checked = false;
}
}
 
}
</script>
   
v3
Comments
Arasappan 7-Sep-15 7:00am
   
good;
One approach is to use the fontawesome to change the way the controls look, then ultimately use radio buttons and make them look like checkboxes, then you won't have to do anything but styling.
Was looking for an article with examples and i think thisone is outlining the idea.

Of cause there's no reason not to use jquery, but this approach allow for some somewhat more elegant solutions then the before mentioned, though a combination could very well be disireable too :)

http://weblog.west-wind.com/posts/2015/Feb/26/Using-FontAwesome-Fonts-for-HTML-Radio-Buttons-and-Checkboxes[^]
   
$('.other').on('click' , function() {
$('.db1').each(function(){
$(this).removeAttr('checked');
})
});

$('.db1').on('click', function(){
$('.other').removeAttr('checked');
});
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900