I need to Checks all input those are inside labels on click "check-all" class. I have tried by nextAll() method but it's not working. kindly help
$('.check-all').click(function() {
alert('asdasd');
$(this).nextAll('input').prop('checked', 'true');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle-check-group">
<a><img src="img/select_all.png" class="check-all" /></a>
<label class="switch">
<input type="checkbox" class="myinput" />
<span class="slider">Ankit</span>
</label>
<label class="switch">
<input type="checkbox"/>
<span class="slider">Mohal</span>
</label>
<label class="switch">
<input type="checkbox"/>
<span class="slider">Kamal</span>
</label>
</div>
<div class="toggle-check-group">
<a><img src="img/select_all.png" class="check-all" /></a>
<label class="switch">
<input type="checkbox" class="myinput" />
<span class="slider">Ankit</span>
</label>
<label class="switch">
<input type="checkbox"/>
<span class="slider">Mohal</span>
</label>
<label class="switch">
<input type="checkbox"/>
<span class="slider">Kamal</span>
</label>
</div>
you can :
use closest method to get closest parent of check-all with class
toggle-check-group
use find method to get all input child of toggle-check-group
if you want to check/uncheck all check bow with the .check-all elements
an idea can be to store the checked state of the first check box and apply it to all sibling ones
var isCheck = inputs.first().prop('checked');
$('.check-all').click(function() {
var inputs = $(this).closest('.toggle-check-group').find('input');
var isCheck = inputs.first().prop('checked');
inputs.prop('checked', !isCheck);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle-check-group">
<a><img src="img/select_all.png" class="check-all" /></a>
<label class="switch">
<input type="checkbox" class="myinput" />
<span class="slider">Ankit</span>
</label>
<label class="switch">
<input type="checkbox"/>
<span class="slider">Mohal</span>
</label>
<label class="switch">
<input type="checkbox"/>
<span class="slider">Kamal</span>
</label>
</div>
<div class="toggle-check-group">
<a><img src="img/select_all.png" class="check-all" /></a>
<label class="switch">
<input type="checkbox" class="myinput" />
<span class="slider">Ankit</span>
</label>
<label class="switch">
<input type="checkbox"/>
<span class="slider">Mohal</span>
</label>
<label class="switch">
<input type="checkbox"/>
<span class="slider">Kamal</span>
</label>
</div>
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>
In my code I use a bootstrap accordion for extra option. When click start, I want to collapse (close) it. I tried
$('#accordion2').collapse({
hide: true
});
But the accordion close and then reopen. A second click do not do anything more. What I miss here? As written in the Bootstrap documentation I use the data-parent to close it.
The code is:
<div id="accordion2" style="width:802px;">
<div class="card">
<div class="card-header" id="headingImgOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseImgOne" aria-expanded="true" aria-controls="collapseImgOne">
Testrun Optionen
</button>
</h5>
</div>
<div id="collapseImgOne" class="collapse" aria-labelledby="headingImgOne" data-parent="#accordion2">
<div class="card-body">
<div class="form-group row">
<label for="text" class="col-4 col-form-label">Server</label>
<div class="col-7">
<div class="input-group">
<div class="form-check">
<label>
<input type="checkbox" name="c06" id="c06" checked> <span class="label-text">c06</span>
</label>
<label>
<input type="checkbox" name="c07" id="c07" checked> <span class="label-text">c07</span>
</label>
<label>
<input type="checkbox" name="c08" id="c08" checked> <span class="label-text">c08</span>
</label>
<label>
<input type="checkbox" name="c09" id="c09"> <span class="label-text">c09</span>
</label>
<label>
<input type="checkbox" name="c10" id="c10"> <span class="label-text">c10</span>
</label>
<label>
<input type="checkbox" name="c11" id="c11"> <span class="label-text">c11</span>
</label>
<label>
<input type="checkbox" name="c12" id="c12"> <span class="label-text">c12</span>
</label>
<label>
<input type="checkbox" name="c13" id="c13"> <span class="label-text">c13</span>
</label>
<label>
<input type="checkbox" name="c14" id="c14"> <span class="label-text">c14</span>
</label>
<label>
<input type="checkbox" name="c15" id="c15"> <span class="label-text">c15</span>
</label>
<label>
<input type="checkbox" name="c16" id="c16"> <span class="label-text">c16</span>
</label>
<label>
<input type="checkbox" name="c17" id="c17"> <span class="label-text">c17</span>
</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="select" class="col-4 col-form-label">Server Domain</label>
<div class="col-7">
<select id="imgdomain" name="select" class="custom-select">
<option value="domain.com" selected>domain.com</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<br/>
I have 3 Icheck control, if any of those is Toggled, will call one function event?, is that possible?
<div class="checkbox">
<label>
<input class="i-check" type="checkbox" id="IsZero" name="IsZero" />0
<span class="pull-right"></span>
</label>
</div>
<div class="checkbox">
<label>
<input class="i-check" type="checkbox" id="IsOne" name="IsOne" />1
<span class="pull-right"></span>
</label>
</div>
<div class="checkbox">
<label>
<input class=" i-check" type="checkbox" id="IsTwo" name="IsTwo" />2+
<span class="pull-right"></span>
</label>
</div>
That function event was for sorting:
so if one is checked, then it will display values with one only, eg. if 1 or 2 is checked will display 1's and 2's.
i tried below code:
$('input:checkbox.i-check')
$('input.i-check').on('ifToggled'), function(event) {
}
but this doesn't trigger them., is there other way?
Here is how you can do this. Instead of console.log, you can call your function:
$('input.i-check').on('click', function(){
if ( $(this).is(':checked') ) {
console.log('Checked');
}
else {
console.log('Unchecked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
<label>
<input class="i-check" type="checkbox" id="IsZero" name="IsZero" />0
<span class="pull-right"></span>
</label>
</div>
<div class="checkbox">
<label>
<input class="i-check" type="checkbox" id="IsOne" name="IsOne" />1
<span class="pull-right"></span>
</label>
</div>
<div class="checkbox">
<label>
<input class=" i-check" type="checkbox" id="IsTwo" name="IsTwo" />2+
<span class="pull-right"></span>
</label>
</div>
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));