0

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
7
Views
4 Years
Discussion Span
Last Post by diafol
0

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.

0

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

0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.