On my SelectAll checkbox and click trigger should work for all input - which has on-click event on it.
trigger working on selectall, but uncheck selectall not working. its didnt uncheck all input
<input type="checkbox" id="SelectAll" />
<input class="checkBoxClass" name="pid[]" id="pid_1" value="1" onclick="javascript: total_select(1,0.35,2700.00);" type="checkbox">
<input class="checkBoxClass" name="pid[]" id="pid_2" value="2" onclick="javascript: total_select(2,0.35,2700.00);" type="checkbox">
<input class="checkBoxClass" name="pid[]" id="pid_3" value="3" onclick="javascript: total_select(3,0.35,2700.00);" type="checkbox">
Below what i have did
$(document).ready(function () {
$("#SelectAll").click(function () {
$(".checkBoxClass").attr('checked', $(this).attr('checked'));
$(".checkBoxClass").change(function(){
if (!$(this).attr("checked")){
$("#SelectAll").attr("checked",false);
}
});
});
});
Above Jquery working for select-all / UN-select all checkbox - which works if i remove below trigger
$(document).ready(function () {
$("#SelectAll").click(function(){
$(".checkBoxClass").trigger("click");
$(".checkBoxClass").attr('checked', true); // if i remove this line then selectall for checkbox don't works
});
});
but i need above jquery to trigger - total_select function
function total_select(id,carat,price){
var lenChkBox = $("input[name='pid[]']:checked").length;
if(document.getElementById("pid_"+id).checked==true) {
total_select.s++;
document.getElementById("noofs").innerHTML=total_select.s;
total_select.c +=carat;
var cs = (total_select.c).toFixed(2);
document.getElementById("carat").innerHTML=cs;
total_select.p +=price * carat;
avg_price_per = total_select.p/total_select.c;
var ca = (avg_price_per).toFixed(2);
document.getElementById("price").innerHTML="$"+ca;
} else {
total_select.s--;
document.getElementById("noofs").innerHTML=total_select.s;
total_select.c -=carat;
cs = (total_select.c).toFixed(2);
document.getElementById("carat").innerHTML=cs;
total_select.p -=price * carat;
avg_price_per = total_select.p/total_select.c;
var ca = (avg_price_per).toFixed(2);
document.getElementById("price").innerHTML="$"+ca;
}
i tried many :
$(".checkBoxClass").attr('checked', true).triggerHandler('click');
$(".checkBoxClass").prop('checked', true).triggerHandler('click');
but still not working , it do check all input on 'SelectAll' and trigger total_select function with proper result , but when i do un-select/uncheck on 'SelectAll' none of my input get un-select/uncheck
You can both solve your problem and improve code quality by using unobtrusive event handlers instead of outdated on* event attributes.
Firstly you can assign each .checkBoxClass its own change event handler, which can then read the meta data from some data attributes you place on the elements.
Then the select all logic can be simplified to check/uncheck all those elements, while triggering a change event to execute the handler. As you're using jQuery, here's an example:
$('.checkBoxClass').change(function() {
if (!this.checked)
return;
// place total_select() logic here, and read the parameters from the elements' data()
console.log($(this).data());
});
$('#SelectAll').change(function() {
$('.checkBoxClass').prop('checked', this.checked).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="SelectAll" />
<input class="checkBoxClass" name="pid[]" id="pid_1" value="1" data-a="1" data-b="0.35" data-c="2700.00" type="checkbox">A
<input class="checkBoxClass" name="pid[]" id="pid_2" value="2" data-a="2" data-b="0.35" data-c="2700.00" type="checkbox">B
<input class="checkBoxClass" name="pid[]" id="pid_3" value="3" data-a="3" data-b="0.35" data-c="2700.00" type="checkbox">C
I found answer as below, but still any one have any other best solution let me know , thanks
$(document).ready(function () {
$("#SelectAll").click(function(){
$(".checkBoxClass").trigger("click");
$(".checkBoxClass").attr('checked', true);
$(".checkBoxClass").attr('checked', $(this).attr('checked')); //add this line and working proper - hope will help someone
});
});
I know it's not an active thread but I've jost sold a similar problem and I'd like to come out with the solution :D
With this, only those checkboxes will be checked or unchecked and (thus triggered )what have different checked property from #SelectAll.
$(function () {
$('#SelectAll').click(function () {
$('.checkBoxClass').each(function () {
if ($(this).prop('checked') !== $('#SelectAll').prop('checked')) {
$(this).trigger('click');
}
});
});
});
function total_select(id,carat,price){
alert(id);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ALL
<input type="checkbox" id="SelectAll" />
A
<input class="checkBoxClass" name="pid[]" id="pid_1" value="1" onclick="javascript: total_select(1,0.35,2700.00);" type="checkbox">
B
<input class="checkBoxClass" name="pid[]" id="pid_2" value="2" onclick="javascript: total_select(2,0.35,2700.00);" type="checkbox">
C
<input class="checkBoxClass" name="pid[]" id="pid_3" value="3" onclick="javascript: total_select(3,0.35,2700.00);" type="checkbox">
<div id="result">
</div>
Related
I search to open the modal #LoginModalStart, with a checkbox, but the page open this modal with every checkbox.
Can you help me ?
$('input[type="checkbox"]').on('change', function(e) {
if (e.target.checked) {
$("#LoginModalScreenplay").modal();
}
});
$('input[type="checkbox"]') targets every checkbox on your page. You probably want to target the specific checkbox. Something like this
<input type="checkbox" id="my-special-checkbox">
$('#my-special-checkbox').on('change', function(e) {
if (e.target.checked) {
$("#LoginModalScreenplay").modal();
}
});
You have to pass show to modal method:
$('#LoginModalScreenplay').modal('show')
You use this,
<input name="checkbox" type="checkbox" id="my-special-checkbox" value=1>
<input name="checkbox" type="checkbox" id="my-special-checkbox" value=2>
<input name="checkbox" type="checkbox" id="my-special-checkbox" value=3>
<script>
$(document).ready(function(){
$('input[name="checkbox"]').on('change', function(e) {
var x = $(this).val();
$("input:checkbox").prop('checked', false);
if(x==1){
$("input[value="+x+"]").prop('checked', true);
$("#LoginModalScreenplay").modal(); //or $("#LoginModalScreenplay").show();
}
});
});
</script>
I have two checkboxes on a page and I want them to act as only one. For example, I select one, and the other is selected automatically, and vice-versa.
I've managed to select both of them at once, but I can't seem to figure out a way to deselect them at once.
And what's bothering me the most, is that it's probably a super simple line of code that I'm simply not remembering.
Is there a way to do this?
Is this what you're looking for?
$(".test").change(function () {
$(".test").attr("checked", this.checked);
});
<input type='checkbox' class='test'>A<br />
<input type='checkbox' class='test'>B<br />
Here is a solution in pure javascript:
// Select all checkboxes using `.checkbox` class
var checkboxes = document.querySelectorAll('.checkbox');
// Loop through the checkboxes list
checkboxes.forEach(function (checkbox) {
// Then, add `change` event on each checkbox
checkbox.addEventListener('change', function(event) {
// When the change event fire,
// Loop through the checkboxes list and update the value
checkboxes.forEach(function (checkbox) {
checkbox.checked = event.target.checked;
});
});
});
<label><input type="checkbox" class="checkbox"> Item 1</label>
<br>
<label><input type="checkbox" class="checkbox"> Item 2</label>
$(document).ready(function() {
$('#check_one').change(function() {
$('#check_two').prop('checked', $('#check_one').prop('checked'));
});
$('#check_two').change(function() {
$('#check_one').prop('checked', $('#check_two').prop('checked'));
});
});
<form>
<label>Simple checkbox</label>
<input type="checkbox" id="check_one" />
<label>Complicated checkbox</label>
<input type="checkbox" id="check_two" />
</form>
Assuming you have two checkboxes named differently but working in concert, this code would work
html:
<input type="checkbox" id="1" class="handleAsOne">
<input type="checkbox" id="2" class="handleAsOne">
javascript (jquery):
$('.handleAsOne').on('change'){
$('.handleAsOne').prop('checked', false);
$(this).prop('checked', true);
}
if i understood your question correctly you are looking for something like this.
I found this code to make something have multiple checkbox select/deselect. The code itself works fine but I want it be able to take in a variable so I do not need to write it 20 times in my script.
What it looks like now:
$(function(){
// add multiple select / deselect functionality
$("#selectcase").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectcase").attr("checked", "checked");
} else {
$("#selectcase").removeAttr("checked");
}
});
What I want to take in:
function locatebox(x){
console.log(x);
// add multiple select / deselect functionality
$("#select" + x).click(function(x) {
$("." + x ).attr("checked", this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$("." + x ).click(function(x){
if($("." + x).length == $("." + x + ":checked").length) {
$("#select" + x ).attr("checked", "checked");
} else {
$("#select" + x).removeAttr("checked");
}
});
//locatebox("rase");
}
locatebox("rase");
When I look in the executed code It shows that rase function has been generated but it does not check any boxes.
Thank you to anyone that could possibly help me out.
Edit: I for got to show how I call it and what the check-box values will be.
I do not know if this is the correct to call out the JavaScript.
Call the multi-select check-box:
<td><input type="checkbox" id="selectrase" onclick="locatebox('rase');"/></td>
Defining one check box:
<td align="center"><input type="checkbox" class="rase" name="rase" value="3"/></td>
<td align="center"><input type="checkbox" class="rase" name="rase" value="4"/></td>
Thank you once again.
I think your architecture for this is just fundamentally flawed. Using onclick() and jQuery makes for insanely hard debugging. With jQuery you should be using prop(). Take advantage of classes and the data attribute to target other elements.
Instead consider:
// Wait for the document to load
$(document).ready(function(){
// for all elements that have this class watch for clicks
$('.js-checkbox-group-toggle').on('click', function(){
// create jquery object of what was clicked
var $this = $(this);
// find the selector target for what was clicked;
var target = $this.data('group-target');
// find all the selector targets
var $targets = $(target);
// assign all the targets the value of what was clicked
$targets.prop("checked", $this.prop("checked"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="js-checkbox-group-toggle" data-group-target=".group1" />Targets Group 1<br />
<input type="checkbox" class="js-checkbox-group-toggle" data-group-target=".group2" />Targets Group 2<br />
<input type="checkbox" class="group1" />Hello 1<br />
<input type="checkbox" class="group2" />Hello 2<br />
<input type="checkbox" class="group1" />Test 1<br />
<input type="checkbox" class="group2" />Test 2<br />
<input type="checkbox" class="group2" />English 2<br />
<input type="checkbox" class="group1" />Breakfast 1<br />
Add as MANY of these as you want, you have no variables in JS to mess with and the code base never has to change.
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<td><input type="checkbox" id="selectrase" /></td>
<td align="center"><input type="checkbox" class="rase" name="rase" value="3"/></td>
<td align="center"><input type="checkbox" class="rase" name="rase" value="4"/></td>
...
<script type="text/javascript"><!--
function locatebox(x){
console.log(x);
// add multiple select / deselect functionality
var id = "#select" + x;
var className = '.' + x;
$(id).click(function(x) {
$(className).prop("checked", $(id).is(':checked'));
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(className).click(function(){
$(id).prop("checked", ($(className).length == $(className + ":checked").length));
});
}
$(document).ready(function(){
locatebox("rase");
}) ;
//--></script>
I have made a check-box checkall/uncheckall.
HTML
<div> Using Check all function </div>
<div id="selectCheckBox">
<input type="checkbox" class="all" onchange="checkAll('selectCheckBox','all','check','true');" />Select All
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 1
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 2
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 3
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 4
</div>
main.js
function checkAll(parentId,allClass,checkboxClass,allChecked){
checkboxAll = $('#'+parentId+' .'+allClass);
otherCheckBox = $('#'+parentId+' .'+checkboxClass);
checkedCheckBox = otherCheckBox.filter($('input[type=checkbox]:checked'));
if(allChecked=='false'){
if(otherCheckBox.size()==checkedCheckBox.size()){
checkboxAll.attr('checked',true);
}else{
checkboxAll.attr('checked',false);
}
}else{
if(checkboxAll.attr('checked')){
otherCheckBox.attr('checked',true);
}else{
otherCheckBox.attr('checked',false);
}
}
}
It works fine. But get bulky when I have whole lot of checkboxes. I want to do same work by using jQuery rather than putting onchange on each checkbox. I tried different sort of things but couldnot work. I tried following one:
$('.check input[type="checkbox"]').change(function(e){
checkAll('selectCheckBox','all','check','true');
});
to do same work as onchange event but didnot work. Where do I went wrong.
I think you just need this: You do not need to pass all the arguments and have the inline onchange event attached to it. You can simplify your code.
$(function () {
$('input[type="checkbox"]').change(function (e) {
if(this.className == 'all')
{
$('.check').prop('checked', this.checked); //Toggle all checkboxes based on `.all` check box check status
}
else
{
$('.all').prop('checked', $('.check:checked').length == $('.check').length); // toggle all check box based on whether all others are checked or not.
}
});
});
Demo
Your selector is wrong:
.check input[type="checkbox"]
Above selects any input of type checkbox that has the ancestor with class .check. It'll match this:
<div class="check">
<input type="checkbox".../>
</div>
it should be:
input.check[type="checkbox"]
You closed the string here $('.check input[type='checkbox']') instead, you should use double quotes $('.check input[type="checkbox"]')
i need help to uncheck or check same radio button if button already checked? I have jquery function which is used to enable or disabled other radio buttons if already checked now i want to add some function that use for check or uncheck same radio button?
(function ($) {
$(document).ready(function () {
$('input:radio').click(function(){
var $inputs = $('input:radio')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
}
})
});
})(jQuery);
<input type="radio" value="Test1" />Test1
<input type="radio" value="Test2" />Test2
<input type="radio" value="Test1" />Test1
<input type="radio" value="Test2" />Test2
Although it is too late to answer, it could help others
I tried this solution.
Works very well for me!
$("input[type='radio'].myClass").click(function(){
var $self = $(this);
if ($self.attr('checkstate') == 'true')
{
$self.prop('checked', false);
$self.each( function() {
$self.attr('checkstate', 'false');
})
}
else
{
$self.prop('checked', true);
$self.attr('checkstate', 'true');
$("input[type='radio'].myClass:not(:checked)").attr('checkstate', 'false');
}
})
Simply replace disabled with checked:
$input.prop("checked", false);
or for this element:
this.checked = false;
However, if you are looking for form element which can be checked and unchecked, maybe input type="checkbox" /> is what you need.
$inputs.filter(':checked').prop('checked', false);
I think you need checkbox instead of radio button to uncheck the checked :
<input class="checkDisable" type="checkbox" value="Test1" />Test1
<input class="checkDisable" type="checkbox" value="Test2" />Test2
<input class="checkDisable" type="checkbox" value="Test3" />Test3
<input class="checkDisable" type="checkbox" value="Test4" />Test4
(function ($) {
$(document).ready(function () {
$('input:checkbox.checkDisable').change(function(){
var $inputs = $('input:checkbox.checkDisable')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
$(this).prop('checked',false);
}
})
});
})(jQuery);
The answer of Pablo Araya is good, but ...
$self.prop('checked', true);
is superfluous here. The radio button already has a checked state for every click.