Member Avatar for divyakrishnan

Hi..

I have a group of checkboxes and I want to apply a style to checked checkbox and remove the style of all other boxes.Here only one checkbox should be cheked at a time.

The code I used as follows

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $(".item").click(function(e) {
        //$(".item").each( function() {
            $(".subscribe").attr('checked', false);
        var checkbox = $(this).find(":checkbox"),
            checked = checkbox.is(":checked");
            //alert(checkbox);
            //checkbox.prop("checked", false);

        if (checked) {

            $(this).attr('checked','checked');
            $(this).css("background-color", "#d1d1d1");
        } else {
            $(this).css("background-color", "#03d100");
        }
        checkbox.prop("checked", !checked);
    });
    $('.item :checkbox').click(function() {
      $(this).parent('li').click();
    //})
      })
});
</script>
<ul class="col-1">
    <li class="item">
        <input type="checkbox" name="subscribe[]" class="subscribe" value="Email" id="subscribe_0" />

        <label for="">Check Up</label>
        <span class="float-r">$19</span>
    </li>
    <li class="item">
       <input type="checkbox" name="subscribe[]" class="subscribe" value="SMS" id="subscribe_1" />

        <label for="">Check Up</label>
        <span class="float-r">$19</span>
    </li>
     <li class="item">
<input type="checkbox" name="subscribe[]" class="subscribe" value="Radio" id="subscribe_2" />
        <label for="">Check Up</label>
        <span class="float-r">$19</span>
    </li> <li class="item">
<input type="checkbox" name="subscribe[]" class="subscribe" value="Radio" id="subscribe_3" />
        <label for="">Check Up</label>
        <span class="float-r">$19</span>
    </li>
</ul>
  • 4 Contributors
  • 5 Replies
  • 1K Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for stultuske

and ... why do you use checkboxes for that? I think you are looking for grouped radiobuttons.

Member Avatar for divyakrishnan

Thanks for the reply...
I want check boxes. That is our client requirement

Member Avatar for diafol

Checkboxes should be independent of one another, they can of course be used to enable other controls such as textboxes or show hidden parts of a form, but in the main they shouldn't affect anything else. Radiobuttons are the correct way of choosing an option (or use a select - dropdown or listbox). The old adage of 'the customer is always right' isn't always true - especially for web design. I take it that you're in charge of design implementation - perhaps you should take the time to educate the client with regard to UI/UX. They're paying for your expertise after all.

Some sites make use of the functionality you're trying to implement, but it doesn't sit easy with the user. Users expect a checkbox to act like an independent checkbox - using them for different purposes can introduce confusion and (in my case) frustration.

Member Avatar for Taywin

My question is that why you need to revert the checked property after you apply CSS?

checkbox.prop("checked", !checked);

By the way, wouldn't find() return all elements it could match with the given condition? In other words, shouldn't it return all checkboxes instead of only one (as your script is expecting)? What you should do may be similar to as follows...

var checkboxes = $(this).find("checkbox"),
checkboxes.each(function() {
  var checkbox = $(this);
  ...
})
Edited by Taywin
Member Avatar for diafol

An alternative:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Rubbish</title>
<style>
    :checked + label {
        font-weight: bold;
    }

</style>
</head>
<body>
<form>
    <input type="checkbox" name="me[]" id="chk1" class = "checkgroup" /><label for "chk1">Label 1</label>
    <input type="checkbox" name="me[]" id="chk2" class = "checkgroup" /><label for "chk2">Label 2</label>
    <input type="checkbox" name="me[]" id="chk3" class = "checkgroup" /><label for "chk3">Label 3</label>
</form>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $('.checkgroup').click(function(){
        id = $(this).attr('id'); 
        $('.checkgroup:not(#' + id + ')').removeAttr("checked");
        alert(id);      //test
    });
</script>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.