Custom Radio button selection bug in angular 6 (inside of ngFor) - javascript

Selecting radio input inside one item in ngFor triggers other radio inputs checked . Created a demo .
Html
<div class='section' *ngFor="let item of radioData">
<div class="radio-selection">
<input type="radio" attr.name="radio-{{item.Id}}" value="true" attr.id="radio-first-{{item.Id}}" [(ngModel)]='item.IsSelected'>
<label attr.for="radio-first-{{item.Id}}">Radio-first {{item.Id}}--value={{item.IsSelected}}</label>
</div>
<div class="radio-selection">
<input type="radio" attr.name="radio-{{item.Id}}" value="false" attr.id="radio-second-{{item.Id}}" [(ngModel)]='item.IsSelected'>
<label attr.for="radio-second-{{item.Id}}">Radio-second {{item.Id}}--value={{item.IsSelected}}</label>
</div>
</div>
css
.section {
border:1px solid #000;
margin-bottom:1rem;
}
.radio-selection {
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
&:hover {
&:before {
border-color: green;
}
}
}
input[type="radio"] + label:before {
content: "";
background: #fff;
border: 1px solid #333;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
margin-right: 10px;
text-align: center;
padding: 2px;
border-radius:50%;
}
input[type="radio"]:checked + label:before {
background:red;
box-shadow: inset 0px 0px 0px 2.5px #fff;
}
}
Thanks

Use name instead of attr.name to set the name of the input elements (see this stackblitz):
<input type="radio" name="radio-{{item.Id}}" ...>
or use the property binding syntax (see this stackblitz):
<input type="radio" [name]="'radio-'+item.Id" ...>

Related

How to check a specific checkbox in a pure CSS Accordion via URL?

I use a pure CSS Accordion to present my content. The Accordion works with normal checkboxes. Now I want to implement, that by sending a simple link, a single checkbox entry will be checked and with the help of an anchor the browser should jump to that entry and show the specific content to the reader.
The whole thing should be done preferably without a scripting or programming language, but after a lot of research I think that at least JavaScript will be required (it must run on the client side, so no PHP or similar).
I have searched and tested a lot but unfortunately I have not found any suitable solution that would work.
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
</head>
<body>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
</style>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
My Content 1
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
My Content 2
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
My Content 3
</div>
</body>
</html>
```
You're correct that JavaScript is required. I have provided a solution, but I haven't tested it, because it's not possible to test in the snippet. It should select the relevant checkbox when a hash tag is detected in the URL that corresponds with a checkbox ID.
So you would use some time https://www.website.com/#title1
// Check if URL of browwser window has hash tag
if (location.hash) {
// Get URL hash tag
const hash = window.location.hash;
// Select checkbox with ID of hashtag
const checkbox = document.querySelector(hash);
// Check if checkbox exists
if(checkbox) {
// Set selected checkbox as checked
checkbox.checked = true;
}
}
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
My Content 1
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
My Content 2
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
My Content 3
</div>

Custom CSS with Checkbox and NgFor

I am trying to get a custom check box 'clickable' when being iterated on with an *ngFor. I have the custom CSS, but nothing is working on the click event.
I am guessing that it is because of the for property on the label, but I don't know how to fix it.
Stackblitz: https://stackblitz.com/edit/angular-4znmwv?embed=1&file=src/app/app.component.css&view=editor
HTML:
<div *ngFor="let item of data">
<input type="checkbox" [checked]= "item.selected" (change)="setChange(item, $event)">
<label htmlFor="{{item.name}}">{{item.name}}</label>
</div>
CSS:
input[type="checkbox"] {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
input[type="checkbox"] + label {
display: block;
position: relative;
padding: 0 1.5rem;
}
input[type="checkbox"] + label::before {
content: '';
position: relative;
display: inline-block;
margin-right: 10px;
width: 20px;
height: 20px;
color: #2a3037;
background-color: #fff;
border-color: #1c8d3e;
}
input[type="checkbox"]:checked + label::before {
color: #fff;
background-color: #138630;
border-color: #000000;
}
input[type="checkbox"]:checked + label::after {
content: '';
position: absolute;
top: 3px;
left: 27px;
border-left: 2px solid black;
border-bottom: 2px solid black;
height: 6px;
width: 13px;
transform: rotate(-45deg);
}
input[type="checkbox"]:focus + label::before {
outline: #5d9dd5 solid 1px;
box-shadow: 0 0px 8px #5e9ed6;
}
input[type="checkbox"]:disabled + label {
color: #575757;
}
input[type="checkbox"]:disabled + label::before {
background: #ddb862;
}
try like this , I have just set the for attribute for the label base of the checkbox id that have been set by item name
<div *ngFor="let item of data">
<input type="checkbox" [id]="item.name">
<label [for]="item.name">{{item.name}}</label>
</div>
demo 🚀
<div *ngFor="let item of data;let i = index">
<input type="checkbox" [checked]= "item.selected" id="{{item.name}}" (change)="setChange(item, $event)">
<label for="{{item.name}}">{{item.name}}</label>
</div>
Try this.
Set the id as the same as the for of the label it will work properly and for is only the attribute name for label and not htmlFor.
Here i have added index for reference if you want the id to be different from the itemname which is dynamically gives index Use like this
<div *ngFor="let item of data;let i = index">
<input type="checkbox" [checked]= "item.selected" id="{{'checkbox'+i}}" (change)="setChange(item, $event)">
<label for="{{'checkbox' + i}}">{{item.name}}</label>
</div>
This way your id would be something like this
checkbox1
checkbox2
...

Change color of a styled checked checkbox with button

I've been stuck on this for a while. To explain very quickly, i have a table of different checkboxes. The user checks however many boxes and clicks continue. The same table shows up on another page/ The boxes that were checked are suppose to load by the click of a button.
My question is, how can I change the color of my styled checkboxes to another color by the click of a button.
Update, I've added code, sorry for the confusion, first time using this
table.example1, table.example1 th, table.example1 td {
border: 3px solid grey;
max-width: 200px;
}
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
display:inline-block;
padding: 6px 60px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: white;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: transparent;
background-repeat: repeat-x;
}
input[type=checkbox]:checked + label{
background-color: #3e618b;
outline: 0;
}
<table class="example1" id="example" style="width:40%;" align='center'>
<tr>
<td>
<input type="checkbox" id="chk1" name="chk" value="1">
<label for="chk1"> 1</label>
</td>
<td>
<input type="checkbox" id="chk2" name="chk"value="2">
<label for="chk2"> 2</label>
</td>
</tr>
</table>
<button>Changes checked checkbox color</button>
Well you could add a class to the label and then define the color based on that class like so:
function toggle() {
var labels = document.getElementsByTagName('label');
for(var i = 0; i < labels.length; i++) {
labels[i].classList.toggle('color');
}
}
table.example1,
table.example1 th,
table.example1 td {
border: 3px solid grey;
max-width: 200px;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label {
display: inline-block;
padding: 6px 60px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: white;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: transparent;
background-repeat: repeat-x;
}
input[type=checkbox]:checked+label {
background-color: #3e618b;
outline: 0;
}
input[type=checkbox]:checked+label.color {
background-color: red;
outline: 0;
}
<table class="example1" id="example" style="width:40%;" align='center'>
<tr>
<td>
<input type="checkbox" id="chk1" name="chk" value="1">
<label for="chk1"> 1</label>
</td>
<td>
<input type="checkbox" id="chk2" name="chk" value="2">
<label for="chk2"> 2</label>
</td>
</tr>
</table>
<button onclick="toggle()">Changes radio button onclick</button>
You could change class attribute of a parent by click on the button.
$("button").click(function() {
$("table").toggleClass("alternative");
});
table.example1, table.example1 th, table.example1 td {
border: 3px solid grey;
max-width: 200px;
}
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
display:inline-block;
padding: 6px 60px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: white;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: transparent;
background-repeat: repeat-x;
}
input[type=checkbox]:checked + label{
background-color: #3e618b;
outline: 0;
}
.alternative input[type=checkbox]:checked + label{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="example1" id="example" style="width:40%;" align='center'>
<tr>
<td>
<input type="checkbox" id="chk1" name="chk" value="1">
<label for="chk1"> 1</label>
</td>
<td>
<input type="checkbox" id="chk2" name="chk"value="2">
<label for="chk2"> 2</label>
</td>
</tr>
</table>
<button>Changes checked checkbox color</button>
You can do it with just CSS
HIDE THE ORIGINAL INPUT FIELD
input[type=checkbox]{
visibility: hidden;
position: absolute;
}
Then add your own custom css to display the fields
input[type=checkbox] + label:before{
height:18px;
margin-right: 5px;
content: " ";
display:inline-block;
vertical-align: baseline;
border:1px solid #ccc;
border-radius:4px;
width:18px;
}
Then add your css for your desired style and background when the checkbox is selected
input[type=checkbox]:checked + label:before{
background: gold;
}

How to capture and style the top checkbox in a 2 level list

This is doing my head in. I have a 2-level list that functions nicely with some jQuery. I want to capture the top checkbox ('Master checkbox') to style it in CSS and hover a border around it, but I can't seem to access it. Wrapping a label around the input tag messses up my jQuery and doesn't seem to help anyway.
Any ideas anyone on what I'm doing wrong? Fiddle
$('input[type=checkbox]').click(function() {
$(this).next().find('input[type=checkbox]').prop('checked', this.checked);
$(this).parents('ul').prev('input[type=checkbox]').prop('checked', function() {
return $(this).next().find(':checked').length;
});
});
.treeBOXClass {
border: 1px solid green;
width: 540px;
height: 250px;
font-family: "Verdana", Arial, serif;
font-size: 13px;
padding: 10px 0px 0px 20px;
list-style-type: none;
background: white;
}
.treeBOXClass ul li {
color: blue;
margin: 7px 0px 4px 12px;
list-style-type: none;
}
.myFlexbox {
display: -webkit-flex;
display: flex;
width: 450px;
margin: 20px 0px 0px 0px;
padding: 15px 0px 15px 0px;
border: 1px solid blue;
}
.my_RH_Text {
width: 350px;
margin: 0px 0px 0px 20px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="treeBOXClass">
<li>
<input type="checkbox" id="mastercheckbox" value="yes" />Master checkbox
<ul>
<label for="HS1">
<div class="myFlexbox">
<li><input type="checkbox" id="HS1" value="one" />HS1</li>
<div class="my_RH_Text">
This is text that I have put in the first box as an example
</div>
</div>
</label>
<label for="HS2">
<div class="myFlexbox">
<li><input type="checkbox" id="HS2" value="one" />HS2</li>
<div class="my_RH_Text">
This is text that I have put in the second box as an example
</div>
</div>
</label>
</ul>
</li><br>
</ul>
Wrap a label around the input element and move the id to it.
Then tweak the jquery so instead of targeting the sibling, it has to go to the parent THEN the sibling.
Proof of concept: I've added a red border around the master checkbox.
PS: Also wrapped the ul children in li tags for valid html.
$('input[type=checkbox]').click(function() {
$(this).parent().next().find('input[type=checkbox]').prop('checked', this.checked);
$(this).parents('ul').prev().find('input[type=checkbox]').prop('checked', function() {
return $(this).parent().next().find(':checked').length;
});
});
#mastercheckbox {
border:1px solid red;
}
.treeBOXClass {
border: 1px solid green;
width: 540px;
height: 250px;
font-family: "Verdana", Arial, serif;
font-size: 13px;
padding: 10px 0px 0px 20px;
list-style-type: none;
background: white;
}
.treeBOXClass ul li {
color: blue;
margin: 7px 0px 4px 12px;
list-style-type: none;
}
.myFlexbox {
display: -webkit-flex;
display: flex;
width: 450px;
margin: 20px 0px 0px 0px;
padding: 15px 0px 15px 0px;
border: 1px solid blue;
}
.my_RH_Text {
width: 350px;
margin: 0px 0px 0px 20px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="treeBOXClass">
<li>
<label id="mastercheckbox"><input type="checkbox" value="yes" />Master checkbox</label>
<ul>
<li>
<label for="HS1">
<div class="myFlexbox">
<input type="checkbox" id="HS1" value="one" />HS1
<div class="my_RH_Text">
This is text that I have put in the first box as an example
</div>
</div>
</label>
</li>
<li>
<label for="HS2">
<div class="myFlexbox">
<input type="checkbox" id="HS2" value="one" />HS2
<div class="my_RH_Text">
This is text that I have put in the second box as an example
</div>
</div>
</label>
</li>
</ul>
</li><br>
</ul>

Fill checkbox on selection with CSS

Is it possible to fill the checkbox with a background colour when checked? Also to disable the 'tick' itself.
How do I achieve this? Should I be looking at jQuery/Javascript for this?
Fiddle Demo: http://jsfiddle.net/119a7e8r/
li.squaredTwo li label {
display:none
}
input[type=checkbox]:checked {
background:red
}
<ul>
<li id='field_1_20' class='gfield squaredTwo field_sublabel_below field_description_below' >
<label class='gfield_label' >Is it free</label>
<div class='ginput_container ginput_container_checkbox'>
<ul class='gfield_checkbox' id='input_1_20'>
<li class='gchoice_1_20_1'>
<input name='input_20.1' type='checkbox' value='Yes' id='choice_1_20_1' tabindex='35' />
<label for='choice_1_20_1' id='label_1_20_1'>Yes</label>
</li>
</ul>
</div>
</li>
</ul>
Here's a nifty CSS-only solution for custom checkboxes:
.hideme {
display: none;
}
.woo {
cursor: pointer;
}
.hideme + .woo:before {
width: 10px;
height: 10px;
border: 2px solid gray;
border-radius: 2px;
box-shadow: -1px 1px 2px 2px rgba(0,0,0,0.2);
background: red;
position: relative;
display: inline-block;
margin-right: 1ex;
content: "";
}
.hideme:checked + .woo:before {
background: green;
}
<input type="checkbox" class="hideme" id="myinput" /><label class="woo" for="myinput">Click me</label>
My starting point for just pure CSS on this would be something like this:
HTML
<input type="checkbox">Hello</input>
CSS
input[type=checkbox] {
width: 20px;
height: 20px;
margin-right: 5px;
vertical-align: bottom;
}
input[type=checkbox]:after {
content: "";
border-bottom: 10px solid red;
border-top: 10px solid red;
display: block;
opacity: 1;
}
input[type=checkbox]:checked:after {
border-bottom: 10px solid blue;
border-top: 10px solid blue;
}
Demo: http://codepen.io/newanalog/pen/LppBgv
Try playing around with the opacity and sizes.
I think you should be looking at jQuery for this. here are some examples for other stackoverflow questions, with a working jsfiddle
hope this helps!

Categories