checkbox check and uncheck at the same time in checklist in javascript

Question

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 18-May-15 3:21am

itsathere

Updated 8-Aug-16 22:53pm

Andy Lanng

v2

Add a Solution

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?

4 solutions

Solution 1

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);
      }
    }
  }
}

Posted 18-May-15 4:11am

Andy Lanng

Updated 18-May-15 5:22am

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

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.

Solution 2

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[^]

Posted 19-May-15 21:03pm

Thomas Nielsen - getCore

Solution 4

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

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

Posted 8-Aug-16 22:53pm

Anil kumar 55

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

itsathere · Accepted Answer · 2015-09-07T00:28:00

Solution 3

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>

Posted 7-Sep-15 0:28am

itsathere

Updated 7-Sep-15 0:35am

v3

Comments

Arasappan 7-Sep-15 7:00am

good;