how to do colored checkbox in javascript

Question

This is a page code that shows attendance report of student.I want checkbox in colored if checked green else red.please help me to do this.I tried it but didn't work.Now i can click only on one checkbox that change color.check this image: https://i.sstatic.net/JgICk.png

<style>
.checkbox {
  margin: 0 0 2em 2em;
}
.checkbox .tag {
  color: #595959;
  display: block;
  float: left;
  font-weight: bold;
  position: relative;
  width: 120px;
}
.checkbox label {
  display: inline;
}
.checkbox .input {
  display: none;
}
.input + label {
  -webkit-appearance: none;
  background-color: red;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 9px;
  display: inline-block;
  position: relative;
}
.input:checked + label:after {
  background-color: green;
  color: #595959;
  content: '\2714';
  font-size: 10px;
  left: 0px;
  padding: 2px 8px 2px 2px;
  position: absolute;
  top: 0px;
}
</style>
 <?php

if(isset($_POST["submit"]))
{
    //Here goes array
    for($i=0;$i<count($_POST['student']);$i++)
    {
        $name=$_POST['student'][$i];
        echo $name;
    }
}
?>

</head>
<body >
Report Attendance
<form name="myform" action="" method="post">
<div class="checkbox">
<table border="1" cellspacing="2" cellpadding="5" summary="">
<?php while ($row = mysql_fetch_assoc($res)){?>
<tr><td> <input type="checkbox" class="input" id="input"  name="student[]" value="<?php echo $row['stu_id']; ?>" checked="checked"   > <?php echo $row['stu_name'] ; ?> <label for="input"></label>
<br/></td></tr>
<?php }?>

</table>
<input type="submit" name="submit" value="submit"/>
</div>
</form>
</body>
</html>

id must be unique within a document ... you have multiple inputs with id="input" - not sure that's the problem though, but it WILL cause problems somewhere for sure — Jaromanda X
– Jaromanda X, Commented Feb 9, 2016 at 12:07
you can't style the checkboxes, i doubt anything can happen in any browser ... you need to use images or font awesome to simulate the pucture you posted. - > stackoverflow.com/questions/2460501/… — Vitaliy Terziev
– Vitaliy Terziev, Commented Feb 9, 2016 at 12:15
@SibyXavier my comment above is still valid but i didnt see you are already working around this and inputs are hidden, +1 for the interesting example — Vitaliy Terziev
– Vitaliy Terziev, Commented Feb 9, 2016 at 12:25
There are accessible checkbox and radios which provide a very good basis and are easily styled. Beware about using only red and green color to indicate true/false: 10% of european/north american men (caucasian?) are red/green color blind. There are many other color blindness but red/green is by far the most prominent one. You should convey information also with another mean (text, symbol, etc), not only with color. — FelipeAls
– FelipeAls, Commented Feb 9, 2016 at 13:53

Narendra CM · Accepted Answer · 2016-02-09 12:18:42Z

1

You just need to make id as unique and labels should point to unique id. Here is the jsfiddle with static HTML https://jsfiddle.net/sua2wsm1/

below changes required in your HTML page

<table border="1" cellspacing="2" cellpadding="5" summary="">
<?php while ($row = mysql_fetch_assoc($res)){?>
<tr><td> <input type="checkbox" class="input" id="input<?php echo $row['stu_id']; ?>"  name="student[]" value="<?php echo $row['stu_id']; ?>" checked="checked"   > <?php echo $row['stu_name'] ; ?> <label for="input<?php echo $row['stu_id']; ?>"></label>
<br/></td></tr>
<?php }?>

answered Feb 9, 2016 at 12:18

Narendra CM

1,4263 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gwendal · Accepted Answer · 2016-02-09 12:18:04Z

1

Actually, duplicates ID can be the problem. A label is link to an input with the for attribute. So, if you click on the label, it'll be the same as clicking on the input. Your css is hiding the inputs, and using label:after as a box. So, if all inputs have the same id, clicking on a label will not work as expected

answered Feb 9, 2016 at 12:18

Gwendal

1,2737 silver badges17 bronze badges

Collectives™ on Stack Overflow

how to do colored checkbox in javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related