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.stack.imgur.com/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, Feb 09 '16 at 12:07
what may be useful is to see the actual page source (not the PHP) - i.e. what the browser actually gets - easier for others to debug it for you — Jaromanda X, Feb 09 '16 at 12:12
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. - > http://stackoverflow.com/questions/2460501/how-to-change-checkboxs-border-style-in-css — Vitaliy Terziev, Feb 09 '16 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, Feb 09 '16 at 12:25
There are [accessible checkbox and radios](http://filamentgroup.github.io/checkboxradio/) 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, Feb 09 '16 at 13:53

score 1 · Answer 1 · answered Feb 09 '16 at 12:18

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

score 1 · Accepted Answer · answered Feb 09 '16 at 12:18

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 }?>

how to do colored checkbox in javascript

2 Answers2