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>

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

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.

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