CODEWITHSUNDEEP
javascriptcsscheckbox
Siby Xavier
Siby Xavier

Reputation: 136

how to do colored checkbox in javascript

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>

Upvotes: 2

Views: 67

Answers (2)

Narendra CM
Narendra CM

Reputation: 1426

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

Upvotes: 1

Gwendal
Gwendal

Reputation: 1273

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

Upvotes: 1

Related Questions