Im trying use radio button with ng-repeat, but when the repetitions are constructed the form dont bind the right way, bugs all radio -_-, what am i doing wrong? Like when I click in radio button change all or no one. I'm using angular js 1 and materialize.
Aqui: parte da estrututa do objeto
$scope.paineis = [
{
id:0,
listaCotacoes:[
{id:0, situacao:0},
{id:1, situacao:4}
]
},
{
id:1,
listaCotacoes:[
{id:6, situacao:0},
{id:9, situacao:4}
]
}
];
<tbody>
<tr ng-repeat="cotacoes in painel.listaCotacoes | orderBy: 'situacao'">
<td><a data-target="verCotacao" class="btn-floating teal modal-trigger"><i class="material-icons">description</i></a></td>
<td ng-if="cotacoes.situacao == 0"><i class="material-icons light-blue-text text-accent-4">lock_open</i></td>
<td ng-if="cotacoes.situacao == 2"><i class="material-icons gray-text">block</i></td>
<td ng-if="cotacoes.situacao == 3"><i class="material-icons green-text">thumb_up</i></td>
<td ng-if="cotacoes.situacao == 4"><i class="material-icons red-text">thumb_down</i></td>
<td>21/02/2014</td>
<td>
<form action="">
<div class="row">
<div class="col s3">
<p>
<input name="{{cotacoes.id}}" type="radio" id="aberta" ng-checked="cotacoes.situacao == 0" value="0" ng-model="cotacoes.situacao"/>
<label for="aberta{{cotacoes.id}}">Abrir</label>
</p>
</div>
<div class="col s3">
<p>
<input name="{{cotacoes.id}}" type="radio" id="Finalizado" ng-checked="cotacoes.situacao == 2" value="2" ng-model="cotacoes.situacao"/>
<label for="Finalizado{{cotacoes.id}}">Finalizado</label>
</p>
</div>
<div class="col s3">
<p>
<input name="{{cotacoes.id}}" type="radio" id="Aprovar" ng-checked="cotacoes.situacao == 3" value="3" ng-model="cotacoes.situacao"/>
<label for="Aprovar{{cotacoes.id}}">Aprovar</label>
</p>
</div>
<div class="col s3">
<p>
<input name="{{cotacoes.id}}" type="radio" id="Reprovada" ng-checked="cotacoes.situacao == 4" value="4" ng-model="cotacoes.situacao"/>
<label for="Reprovada">Reprovar</label>
</p>
</div>
</div>
</form>
</td>
</tr>
</tbody>
If your radio buttons are a group i.e where you have to select one from a group. The name "name="{{cotacoes.id}}"" should match on all of them. So instead of having them name="{{cotacoes.id}}" change to name="radio-group" on all of them that should work
<li>
<input type="radio" name="radio" id="radio2" ng-model="selectedItem.style_id" value="2">
<label for="radio2"><img src="/angular/images/Theme-Light-2.png" alt="course_theme_2"></label>
</li>
<li>
<input type="radio" name="radio" id="radio3" ng-model="selectedItem.style_id" value="3">
<label for="radio3"><img src="/angular/images/Theme-Light-3.png" alt="course_theme_3"></label>
</li>
<li>
<input type="radio" name="radio" id="radio4" ng-model="selectedItem.style_id" value="4">
<label for="radio4"><img src="/angular/images/Theme-Light-4.png" alt="course_theme_4"></label>
</li>
<li>
<input type="radio" name="radio" id="radio5" ng-model="selectedItem.style_id" value="5">
<label for="radio5"><img src="/angular/images/Theme-Light-5.png" alt="course_theme_5"></label>
</li>
name="" attribute groups radio buttons
Related
<div class="product_colors">
<span class="header" style="display:block;">Color</span>
<label class="color_label active">
<input type="radio" name="product_color" value="gold" >Gold
<span style="""></span>
</label>
<label class="color_label">
<input type="radio" name="product_color" value="rose gold">Rose Gold
<span style="" data-title="rose gold"></span>
</label>
<label class="color_label">
<input type="radio" name="product_color" value="silver" > Silver
<span style="" data-title="silver"></span>
</label>
</div>
<div class="product_stones">
<span class="header" style="display:block;">Stone</span>
<label class="stone_label">
<input type="radio" name="product_stone" value="malachite" >malachite
</label>
<label class="stone_label active">
<input type="radio" name="product_stone" value="tiger-eye" > tiger-eye
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="black" > black
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="blue" > blue
</label>
</div>
<div class="combination">
Combination
<div class="hidden">
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
<input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
<input type="radio" name="combination" class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
</div>
</div>
here is my output image
I want to change combination radio button value to be select automatically on the basis of selected color and stone. Can someone help me to get rid of this problem.
Here is my code I've tried everything but I am new in JS so I can't find solution of this problem
Color
Gold
Rose Gold
Silver
<div class="product_stones">
<span class="header" style="display:block;">Stone</span>
<label class="stone_label">
<input type="radio" name="product_stone" value="malachite" >malachite
</label>
<label class="stone_label active">
<input type="radio" name="product_stone" value="tiger-eye" > tiger-eye
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="black" > black
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="blue" > blue
</label>
</div>
<div class="combination">
Combination
<div class="hidden">
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
<input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
<input type="radio" name="combination" class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
</div>
</div>
Here is another solution I've tried which is not edit HTML.
My solution is going to find combination radio button that has proper data-color and data-stone
$("input[name^='product_']").on('change', (e) => {
$("input[name='combination']").prop('checked', false);
var productColor = $("input[name='product_color']:checked").val();
var productStone = $("input[name='product_stone']:checked").val();
if (productColor !== undefined && productStone !== undefined) {
if ($(`input[data-color='${productColor}'][data-stone='${productStone}']`).length) {
$(`input[data-color='${productColor}'][data-stone='${productStone}']`).trigger('click');
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product_colors">
<span class="header" style="display:block;">Color</span>
<label class="color_label active">
<input type="radio" name="product_color" value="gold" >Gold
<span style="""></span>
</label>
<label class="color_label">
<input type="radio" name="product_color" value="rose gold">Rose Gold
<span style="" data-title="rose gold"></span>
</label>
<label class="color_label">
<input type="radio" name="product_color" value="silver" > Silver
<span style="" data-title="silver"></span>
</label>
</div>
<div class="product_stones">
<span class="header" style="display:block;">Stone</span>
<label class="stone_label">
<input type="radio" name="product_stone" value="malachite" >malachite
</label>
<label class="stone_label active">
<input type="radio" name="product_stone" value="tiger-eye" > tiger-eye
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="black" > black
</label>
<label class="stone_label">
<input type="radio" name="product_stone" value="blue" > blue
</label>
</div>
<div class="combination">
Combination
<div class="hidden">
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
<input type="radio" name="combination" class="hidden_wrap" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
<input type="radio" name="combination" class="hidden_wrap" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
<input type="radio" name="combination" class="hidden_wrap" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
</div>
</div>
You need some jQuery to achieve this
<script>
$(document).ready(function() {
$('.product_description').click(function() {
var color = $('input[name="product_color"]:checked').val();
var stone = $('input[name="product_stone"]:checked').val();
var combinationClass = color + "-" + stone
if ($('.' + combinationClass).length) {
$('.' + combinationClass).attr('checked', true)
} else {
//If the class name of the combination is not found
alert("something went wrong");
}
});
});
</script>
HTML Code
<!--
# Added common class for all the stone and colour radio buttons to enable trigger
# Added Class based on the colour and stone value in the combination
# Added checked attribute to stone and colour radio buttons for on Load default selection
-->
<div class="product_colors">
<span class="header" style="display:block;">Color</span>
<label class="color_label">
<input type="radio" class="product_description" name="product_color" value="gold" checked>Gold
<span></span>
</label>
<label class="color_label">
<input type="radio" class="product_description" name="product_color" value="rose-gold">Rose Gold
<span data-title="rose gold"></span>
</label>
<label class="color_label">
<input type="radio" class="product_description" name="product_color" value="silver"> Silver
<span data-title="silver"></span>
</label>
</div>
<div class="product_stones">
<span class="header" style="display:block;">Stone</span>
<label class="stone_label">
<input type="radio" class="product_description" name="product_stone" value="malachite" checked>malachite
</label>
<label class="stone_label active">
<input type="radio" class="product_description" name="product_stone" value="tiger-eye"> tiger-eye
</label>
<label class="stone_label">
<input type="radio" class="product_description" name="product_stone" value="black"> black
</label>
<label class="stone_label">
<input type="radio" class="product_description" name="product_stone" value="blue"> blue
</label>
</div>
<div class="combination">
Combination
<div class="hidden">
<input type="radio" name="combination" class="hidden_wrap gold-malachite" data-color="gold" data-stone="malachite" data-handle="joory-earring-malachite-gold"> gold-malachite
<input type="radio" name="combination" class="hidden_wrap gold-toger-eye" data-color="gold" data-stone="tiger-eye" data-handle="copy-of-joory-earrings-tiger-eye-gold">gold-tiger-eye
<input type="radio" name="combination" class="hidden_wrap rose-gold-black" data-color="rose gold" data-stone="black" data-handle="kanz-ring-black-rose-gold"> rose-gold-black
<input type="radio" name="combination" class="hidden_wrap silver-blue" data-color="silver" data-stone="blue" data-handle="joory-earring-blue-silver"> silver-blue
</div>
</div>
This is the codes for radio box.
<div class="question-answer">
<label style="margin: 10px;">
<span class="kt-font-bolder">1</span>
<br>
<input name="2" type="radio" label="1" value="1">
</label>
<label style="margin: 10px;">
<span class="kt-font-bolder">2</span>
<br>
<input name="2" type="radio" label="2" value="2">
</label>
<label style="margin: 10px;">
<span class="kt-font-bolder">3</span>
<br>
<input name="2" type="radio" label="3" value="3">
</label>
<label style="margin: 10px;">
<span class="kt-font-bolder">4</span>
<br>
<input name="2" type="radio" label="4" value="4">
</label>
<label style="margin: 10px;">
<span class="kt-font-bolder">5</span>
<br>
<input name="2" type="radio" label="5" value="5">
</label>
<br>
<span style="color: rgb(128, 0, 0);"></span>
</div>
There are almost 20 question in a page with same code. How can I check all 3 in radiobox with js code? Can anyone help me, please?
You could try document.querySelectorAll to find the elements you want by using a css selector like .question-answer input[type="radio"][value="3"]. Then you can iterate over that list and set the checked property to true.
const inputElementsWith3 = document.querySelectorAll('.question-answer input[type="radio"][value="3"]');
inputElementsWith3.forEach(function(radio) { radio.checked = true; });
I have this code like survey form with radio buttons and checkboxes. I try to fill in this form with all options, but the form mailto action doesn't perform if I select more than 12 radio & check boxes (total) in the entire page.
It takes all input as plain text and it operates if I select less than 12 radio buttons and checkboxes. I need the user to allow maximum selection and then send the data via mail. I don't know JavaAPIMail servlet so trying via form action mailto.
<section>
<form action="MAILTO:someone#example.com" method="post" enctype="text/plain">
<div class="title1">
<ol class="list-group">
<li class="list-group-item"> heading 1 :
<div>
<label class="radio-inline"><input type="radio" name="1" value="J">j</label>
<label class="radio-inline"><input type="radio" name="1" value="K">K</label>
<label class="radio-inline"><input type="radio" name="1" value="L">L</label>
<label class="radio-inline"><input type="radio" name="1" value="M">M</label>
<label class="radio-inline"><input type="radio" name="1" value="N">N</label>
<label class="radio-inline"><input type="radio" name="1" value="O">O</label>
</div>
</li>
<li class="list-group-item"> Heading 2 :
<div class="form-row">
<textarea name ="Head2:" placeholder ="Type Here" id ="H"></textarea>
</div>
</li>
<li class="list-group-item"> Heading 3 : (you can select more than one option)
<div>
<label class="checkbox-inline"><input type="checkbox" name="A:" class="ipad CCBOX" value="ipad">iPad</label>
<label class="checkbox-inline"><input type="checkbox" name="A:" class="web CCBOX" value="web">Web</label>
<label class="checkbox-inline"><input type="checkbox" name="A:" class="other CCBOX" value="other">other</label>
</div>
</li>
<li class="list-group-item"> Heading 4:
<div>
<label class="radio-inline"><input type="radio" name="B" value="Daily">Daily</label>
<label class="radio-inline"><input type="radio" name="B" value="Weekly">Weekly</label>
<label class="radio-inline"><input type="radio" name="B" value="Biweekly">Biweekly</label>
<label class="radio-inline"><input type="radio" name="B" value="Monthly">Monthly</label>
</div>
</li>
</ol>
<span id="web"><h3><b>Web</b></h3>
<ol class="list-group" >
<li class="list-group-item"> Heading 6:
<div>
<label class="radio-inline"><input type="radio" name="C" value="Easy">Easy</label>
<label class="radio-inline"><input type="radio" name="C" value="Neither easy nor difficult">Neither easy nor difficult</label>
<label class="radio-inline"><input type="radio" name="C" value="Difficult">Difficult</label>
</div>
</li>
<li class="list-group-item"> Heading 7:
<div class="form-row">
<textarea name = "Q :" placeholder = "Type Here" id = "comment-good" ></textarea>
</div>
</li>
<li class="list-group-item"> Heading 8:
<div class="form-row">
<textarea name = "W" placeholder = "Type Here" id = "comment-lack" ></textarea>
</div>
</li>
<li class="list-group-item"> Heading 9
<div class="form-row">
<textarea name = "E" placeholder = "Suggestions" id = "comment-sugg"></textarea>
</div>
</li>
</ol></span>
<span id="ipad"><h3><b>ipad</b></h3>
<ol class="list-group">
<li class="list-group-item"> Heading 9
<div>
<label class="radio-inline"><input type="radio" name="R" value="ipad Easy">Easy</label>
<label class="radio-inline"><input type="radio" name="R" value="ipad Neither easy nor difficult">Neither easy nor difficult </label>
<label class="radio-inline"><input type="radio" name="R" value="ipad Difficult">Difficult</label>
</div>
</li>
<li class="list-group-item"> Heading 10
<div class="form-row">
<textarea name = "T" placeholder = "Type Here" id = "comment-goodipad"></textarea>
</div>
</li>
<li class="list-group-item"> Heading 11
<div class="form-row">
<textarea name = "Y: " placeholder = "Type Here" id = "comment-lackipad" ></textarea>
</div>
</li>
<li class="list-group-item"> Heading 12
<div class="form-row">
<textarea name = "U " placeholder = "Suggestions" id = "comment-suggipad" ></textarea>
</div>
</li>
</ol></span>
<span id="other"><h3><b>Other</b></h3>
<ol class="list-group">
<li class="list-group-item"> Heading 13
<div class="form-row">
<textarea name = "I" placeholder = "Type Here" id = "comment-asuse" ></textarea>
</div>
</li>
<li class="list-group-item"> O
<div>
<label class="radio-inline"><input type="radio" name="S" value="Easy">Easy</label>
<label class="radio-inline"><input type="radio" name="S" value="Neither Easy nor difficult">Neither Easy nor difficult</label>
<label class="radio-inline"><input type="radio" name="S" value="Difficult">Difficult</label>
</div>
</li>
<li class="list-group-item"> Heading 14 :
<div>
<label class="radio-inline"><input type="radio" name="Z" value="Yes">Yes</label>
<label class="radio-inline"><input type="radio" name="Z" class="csgo view" value="No">No</label>
</div>
</li>
<li class="list-group-item excel" > Heading 15
<div class="form-row">
<textarea name = "X" placeholder = "Type Here" id = "comment-lackasd" ></textarea>
</div>
</li>
<li class="list-group-item"> Heading 16:
<div class="form-row">
<textarea name = "V" placeholder = "Suggestions" id = "comment-suggasd" ></textarea>
</div>
</li>
</ol></span>
<h3><b>Scope</b></h3>
<ol class="list-group">
<li class="list-group-item"> Heading 17
<div>
<label class="radio-inline"><input type="radio" name="F" value="Most of the times">Most of the times</label>
<label class="radio-inline"><input type="radio" name="F" value="Occasionally">Occasionally </label>
<label class="radio-inline"><input type="radio" name="F" value="Doesn't meet my requirements">
Doesn't meet my requirements</label>
</div>
</li>
<li class="list-group-item"> Heading 18:
<div>
<label class="checkbox-inline"><input type="checkbox" name="d :" value="D">D</label>
<label class="checkbox-inline"><input type="checkbox" name="d :" value="S">S</label>
<label class="checkbox-inline"><input type="checkbox" name="d :" value="C">C</label>
<label class="checkbox-inline"><input type="checkbox" name="d :" value="M">M</label>
<label class="checkbox-inline"><input type="checkbox" name="d :" value="R">R</label>
</div>
</li>
<li class="list-group-item"> Heading 19
<div class="form-row">
<textarea name = "hi:" placeholder = "Type Here" id = "comment-l" ></textarea>
</div>
</li>
<li class="list-group-item"> Heading 20
<div class="form-row">
<textarea name = "hi2:" placeholder = "Suggestions" id = "comment-s" ></textarea>
</div>
</li>
</ol>
<h3><b>Overall Experience</b></h3>
<ol class="list-group">
<li class="list-group-item"> Heading 21:
<div>
<label class="radio-inline"><input type="radio" name="H" value="Likely">Likely</label>
<label class="radio-inline"><input type="radio" name="H" value="Not-Sure">Not Sure</label>
<label class="radio-inline"><input type="radio" name="H" value="Unlikely">Unlikely</label>
</div>
</li>
<li class="list-group-item"> Heading 22:
<div>
<label class="radio-inline"><input type="radio" name="G" value="Satisfied">Satisfied</label>
<label class="radio-inline"><input type="radio" name="G" value="Neutral">Neutral</label>
<label class="radio-inline"><input type="radio" name="G" value="Dissatisfied">Dissatisfied</label>
</div>
</li>
<li class="list-group-item"> Heading 24:
<div>
<label class="radio-inline"><input type="radio" name="..." value="Size">Size</label>
<label class="radio-inline"><input type="radio" name="..." value="Competition">Competition</label>
<label class="radio-inline"><input type="radio" name="..." value="Mix of both">Mix of both</label>
</div>
</li>
<li class="list-group-item"> Please provide your overall satisfaction:
<input id="input-2c" class="rating" min="0" max="5" step="0.5" data-size="sm" name="rating" data-symbol="" data-glyphicon="false" data-rating-class="rating-fa">
</li>
</ol>
<!-- form submission -->
<div class="wrapper">
<input type="submit" value="Send" class="btn btn-primary">
</div>
</form>
</div>
</section>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$('.CCBOX').click(function () {
$('#other').hide();
$('#web').hide();
$('#ipad').hide();
if($(".ipad:checked").length === 1 ){
$('#ipad').show();
}
if($(".web:checked").length === 1 ){
$('#web').show();
}
if($(".other:checked").length === 1 ){
$('#other').show();
}
});
</script>
<script type="text/javascript">
$(function() {
$('input[name="Z"]').on('click', function() {
if ($(this).val() == 'No') {
$('.excel').show();
}
else {
$('.excel').hide();
}
});
});
</script>
</html>
The problem that I am facing is when I click send button with all options selected, the mailto doesn't function. But if I select few number of radio buttons and checkboxes (maximum 12) the mail function operates. Please help me with where i have to make changes.
When I check everything and submit, I get an email with this in the body:
1=O
Head2:=
A:=ipad
A:=web
A:=other
B=Monthly
C=Difficult
Q :=
W=
E=
R=ipad Difficult
T=
Y: =
U =
I=
S=Difficult
Z=No
X=
V=
F=Doesn't meet my requirements
d :=D
d :=S
d :=C
d :=M
d :=R
hi:=
hi2:=
H=Unlikely
G=Dissatisfied
...=Mix of both
rating=
So, clearly, it's working for me. That's why I think it's an os or mail client issue.
Here it is with ALL text areas and text fields using values:
1=O
Head2:=
A:=ipad
A:=web
A:=other
B=Monthly
C=Difficult
Q :=value of Q :
W=value of W
E=value of E
R=ipad Difficult
T=value of T
Y: =value of Y:
U =value of U
I=value of I
S=Difficult
Z=No
X=value of X
V=value of V
F=Doesn't meet my requirements
d :=D
d :=S
d :=C
d :=M
d :=R
hi:=value of hi:
hi2:=value of hi2:
H=Unlikely
G=Dissatisfied
...=Mix of both
rating=Satisfaction value
I have a checkbox and a div on my page.
<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals"
ng-checked="ModelData.Animals == 'A'" />
<div class="form-group" ng-show="ModelData.Animals == 'A'">
<label for="FirstName" class="col-md-9">
Are you interested in Animal Liability Coverage?
</label>
<div class="col-md-3">
<label>
<input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
value="Y" />
Yes
<input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
value="N" />
No
</label>
</div>
</div>
I want to show the DIV when the checkbox is selected and hide when deselected. For the first time the above code workd fine ie when checkbox is selected and DIV hides on deselecting the checkbox. But after the first time its not working. It does not show the DIV after selecting the checkbox.
Have you tried it this way? Here's the fiddle It works great.
<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" />
<div class="form-group" ng-show="ModelData.Animals">
<label for="FirstName" class="col-md-9">
Are you interested in Animal Liability Coverage?
</label>
<div class="col-md-3">
<label>
<input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="Y" /> Yes
<input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="N" /> No
</label>
</div>
</div>
I think you are looking for ng-true-value and ng-false-value
<div ng-app>
<div >
<input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="check"/>
</div>
<div ng-show="check == 'A'">
Checked
</div>
</div>
Fiddle
<body ng-app>
<label>Wolf: <input type="checkbox" ng-model="Wolf" ng-init="checked=true" /></label><br/>
<label>Tiger: <input type="checkbox" ng-model="Tiger" ng-init="checked=false" /></label><br/>
<label>Lion: <input type="checkbox" ng-model="Lion" ng-init="checked=false" /></label><br/>
Show when checked:
<div ng-if="Wolf">
<span> This is removed when the wolf is checked.
</span>
</div>
<div ng-if="Tiger">
<span> This is removed when the tiger is checked.
</span>
</div>
<div ng-if="Lion">
<span> This is removed when the lion is checked.
</span>
</div>
</body>
Input type checkbox return true false in ng-model so i just use this. Its working
<div ng-app>
<div >
<input type="checkbox" ng-model="check"/>
</div>
<div ng-show="check == true">
Checked
</div>
how to get checkbox value in array format like [{abc:[1,2,3]}]
now i am getting like [{abc[]:1,abc[]:2,abc[]:3}]...
for getting serializedarray i am using var form = $('.wpc_contact').serializeArray();
here this is my html form which is get generating dynamic (i am using drag and drop for creating dynamic form)
<form method="POST" name="1" class="form-horizontal wpc_contact" novalidate="novalidate">
<fieldset>
<div id="legend" class="">
<legend class="">Demo</legend>
<div id="alert-message" class="alert hidden" style="color: red;"></div>
</div>
<div class="control-group">
<label class="control-label">Checkboxes</label>
<div class="controls" name="wpc_chkbox" req="yes">
<label class="checkbox">
<input type="checkbox" value="Option one" id="wpc_chkbox_0" name="wpc_chkbox[]" req="yes"> Option one
</label>
<label class="checkbox">
<input type="checkbox" value="Option two" id="wpc_chkbox_1" name="wpc_chkbox[]" req="yes"> Option two
</label>
</div>
<p class="help-blocksp" style="display:none;">wpc_chkbox</p>
<p class="help-block1" style="display:none;" checked="checked"></p>
</div>
<div class="control-group">
<label class="control-label">Inline Checkboxes</label>
<div class="controls" name="wpc_inline_chkbox" req="yes">
<label class="checkbox inline">
<input type="checkbox" value="1" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_0" req="yes"> 1
</label>
<label class="checkbox inline">
<input type="checkbox" value="2" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_1" req="yes"> 2
</label>
<label class="checkbox inline">
<input type="checkbox" value="3" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_2" req="yes"> 3
</label>
</div>
<p class="help-block" style="display:none;">wpc_inline_chkbox</p>
<p class="help-block1" style="display:none;" checked="checked"></p>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-success">Button</button>
</div>
</div>
</fieldset>
To create an array use this -
var arr = $("input[name='checkboxname[]']:checked").map(function() {
return this.value;
}).get();
Alernate Solution :
<input type="checkbox" class="selector" value="{value}"/> //add as many as you wan't
JS
var checked='';
$('.selector:checked').each(function(){
checked=checked+','+$(this).val();
});
PHP
$ids=explode(',',substr($_GET['param_with_checked_values'],1));