CODEWITHSUNDEEP
javascriptjqueryasp.netasp.net-mvcasp.net-mvc-3
Sweetie
Sweetie

Reputation: 1368

Working With checkboxes in the web pages

I have group of checkboxes and that are compulsory to be applied but the situation is user can be able to check only one check box at a time. So, for this I have implemented something like this with the help of internet. No doubt it works fine when there are no checkbox checked by default. But suppose, one of the checkbox is checked true when page loads, then this does not works unitl I click on checkbox twice.

Here is what I am using::

So , Assuming I have set of 5 checkboxes, I set same class name for all the checkboxes and then

<input type="checkbox"  class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox"  class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox"  class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox"  class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox"  class="myclass" onclick="Checkme(this.className);"/>

In View page I have declared:: 

  function Checkme(class_Name) {
                Check_OR_Uncheck(class_Name);
            }

In Common js::

function Check_OR_Uncheck(class_Name) {
    $("." + class_Name).click(function () {
        if ($(this)[0].checked) {
            $("." + class_Name).each(function () {
                $(this)[0].checked = false;
            });
            $(this)[0].checked = true;
        }
        else {
            $(this)[0].checked = false;
        }
    });
}

Please Help me to achieve this..

Upvotes: 0

Views: 104

Answers (5)

Paul Sobocinski
Paul Sobocinski

Reputation: 41

Instead of implementing a group of check boxes that behave like a group of radio buttons, I suggest implementing a group of radio buttons that look like a group of check boxes:

input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}

This approach simplifies your implementation; you have two one-line CSS rules instead of a JS event handler function, event binding (on both document ready and the HTML element itself), not to mention a possible dependency on jQuery (if you choose to use it).

The catch to this approach is that it requires CSS3 support. For more info, check out this SO answer: https://stackoverflow.com/a/279510/2503516

Upvotes: 0

Amit
Amit

Reputation: 15387

Try this

$(function(){
  $('input:checkbox').prop('checked', false)
   $('input:checkbox').click(function(){
    if($(this).is(':checked')){
        $('input:checkbox').not(this).prop('checked', false);        
    }
  });
})

Upvotes: 0

Nitin Varpe
Nitin Varpe

Reputation: 10694

Try this

$(function(){
    $('.myclass').click(function(){

        var s=$(this).prop('checked');
        if(s==true)
        {
             $('.myclass').prop('checked',false)
              $(this).prop('checked',true)
        }

    });
});

Or

You simply can use 

if(s==true)
        { 
            $(this).siblings().prop('checked',false);
        }

FIDDLE

Upvotes: 0

Vinoth
Vinoth

Reputation: 647

Keep your code in the document ready event. This will register the click event for "myclass". 

$(".myclass").click(function () {
  if ($(this)[0].checked) {
    $(".myclass").each(function () {
        $(this)[0].checked = false;
    });
    $(this)[0].checked = true;
  } else {
    $(this)[0].checked = false;
  }
});

jsfiddle

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74420

You could use document ready handler and call method:

jsFiddle

$(function(){
    $(':checkbox:checked').each(function(){
        Checkme(this.className);
    });
});

Upvotes: 0

Related Questions