How to uncheck a checkbox when checked option is other than 'All' - javascript

I've multiple checkboxes which are populated from database, except one checkbox which is "All" (used to check/uncheck all other checkboxes onclick)
When all the options are checked and if any option other than 'All' is unchecked then checkbox of All should be unchecked.
When all the option are checked except 'All' then 'All' should be checked. How to proceed?
My code:
<script>
$(document).ready(function () {
('#check').append('<input type="checkbox" id="checkAll" name="myCheckbox[]" value="All" > </input>' + "All" );
//'datadb' is data from db in json array
//datadb={'apple','banana','orange'}
$.each(datadb, function(i, fruit) {
$('#check').append('<input type="checkbox" name="myCheckbox[]" class=".chk" value="' + fruit + '" > </input>' + fruit );
$('#check').append('<br/>');
}
});
</script>
<script>
$(document).ready(function() {
$("#checkAll").click(function () {
$('input:checkbox').not(this).removeProp('checked');
});
});
</script>
<div id="check" onchange="testingclick()"></div>
How to fill the function to satisfy above 1 and 2
<script>
function testingclick(){
var $check_values = $("input[type=checkbox][name='myCheckbox[]']:checked");
var $check_len = $check_values.length;
var $total_len = $("input[type=checkbox][name='myCheckbox[]']").length;
window.var_multiple_checked = $check_values.map(function(){ return "'" + this.value + "'"; }).get();
temp_checked= window.var_multiple_checked;
}
</script>

For this code.
$('input:checkbox').not(this).prop('checked', this.checked);
Try to use removeProp instead
$('input:checkbox').not(this).removeProp('checked');
And for the events of your checkbox. Hook all with event.
$(document).ready(function() {
$('input:checkbox').click(function () {
if ($(this).attr('id') === 'checkAll' && $(this).is(':checked')) {
$('input:checkbox').not($(this)).removeProp('checked');
} else {
$('#checkAll').removeProp('checked');
}
});
});

Related

jQuery - Disabling checkbox & adding attribute on click

I need checkboxes + table rows that share attributes to be enabled once the first checkbox has been ticked. (id for the table row + class for checkbox).
This is only half working
My problem is that if you have multiple boxes selected and uncheck just one, all of the checkboxes and table rows lose the disabled attribute.
https://jsfiddle.net/a1p7an7o/
HTML
<tr id="IN-HOUSE">
<input onchange="check();" class="IN-HOUSE" name="bill[]" type="checkbox">
<label for="Bill?">Bill?</label>
</td>
</tr>
Javascript
<script>
function check(){
$('input[name*=bill]').change(function() {
$t = $(this);
var $th = $(this).attr('class');
$c = $("tr[id!='"+$th+"']");
if ($(this).is(':checked')) {
$('input[name*=bill]').each(function() {
if ($(this).attr('class') != $th) {
$(this).not($t).prop('disabled', true);
$c.not($t).addClass( "disable" );
}
});
} else {
$('input[name*=bill]').each(function() {
if ($(this).attr('class') != $th) {
$(this).not($t).prop('disabled', false);
$("tr[id!='"+$th+"']").removeClass("disable");
}
});
}
});
}
</script>

Make a clickable dropdown that gets the values and places them in a table JQuery

This is a validation check that already works i have a name,Email and some other input fields this checks if everything is filled in and if not it makes the inputfields red. if everything is correct it will create a table with the values of the inputfields i have filled in.
<script>
$(document).ready(function(){
$('input[name="submit"]').click(function(e) {
e.preventDefault();
formIsValid = true;
var errors = [];
$('.errors').html("");
$('input.required').each(function() {
if ($(this).val() == '') {
formIsValid = false;
message = $(this).attr('id') + ' is required';
errors.push(message);
$(this).addClass("red");
} else{
$(this).removeClass("red");
}
});
if (formIsValid == true) {
$('.data').append('<tr class="datarow"><td>'+$('input[name="name"]').val()+'</td><td>'+$('input[name="email"]').val()+'</td><td>'+$('input[name="phone_number"]').val()+'</td><td class="delete">X</td></tr>');
updateTotalRows();
$('.delete').click(function() {
$(this).parent().remove();
updateTotalRows();
})
}
});
function updateTotalRows() {
$('.total').html('Ik heb nu : ' + $('.datarow').length + ' rows');
}
});
</script>
<script>
function selectCountry() {
$('.data').append('<tr class="datarow"><td>'+$('.info_link').val()+'</td><td>'+'</td><td class="delete">X</td></tr>');
updateTotalRows();
}
</script>
I already have a clickable dropdown with country's in it but when i click it should use my function selectCountry. That function should make a table with the name of the subitem i have clicked.
Landen
Nederland
Duitsland
Frankrijk
<script>
$(".dropdown")
.bind("click", function (selectCountry) {
console.log((selectCountry))
});
</script>
<script>
$(function(){
$('.info_link').click(function(){
alert($(this).text()); //$('#table tr:last').append($("<td></td>").text());
});
});
</script>
so my question is how do i make a clickable dropdown that takes the value of the subitem and puts it in a table.
You can use a standard <select id="mySelect"><option value="abc">ABC</option></select> element and add a function on element value change:
$("#mySelect").change(function() {
var optionValue = $(this).val();
$('#table tr:last').append('<td>' + optionValue + '</td>');
});

Check if the Checkbox is checked or no in MVC

I want to check if the checkbox is checked or no.
I have the following code:
<div class="checkbox">
#Html.HiddenFor(model => model.VehicleTypeSelected)
#Html.ValidationMessageFor(model => model.VehicleTypeSelected)
<br>
#foreach (VehicleType vt in ViewBag.VehicleTypes)
{
<label><input type="checkbox" value="#vt.VehicleTypeID" name="VehicleTypeIds" class="vehicle-type-selector" /> #vt.Name
<br></label>
}
I want to use this approach:
$('#checkBoxForm :checkbox').click(function() {
var $this = $(this);
if ($this.is(':checked')) {
// the checkbox was checked
} else {
// the checkbox was unchecked
}
});
if the checkbox (isUniversal) is checked, I want to disable all the checkboxes(vehicleTypes)
You can check if any vehicle type is checked, using just this:
$(function(){
var isAnyVehicleTypeChecked = $(".vehicle-type-selector").is(":checked").length > 0
});
Furthermore, using the following
$(function(){
var checkedVehicleTypes = $(".vehicle-type-selector").is(":checked");
});
you can pick all the checkboxes that has the class vehicle-type-selector and they are checked.
if( $('.vehicle-type-selector').is(":checked") ){
// Do something
}
use the attr() function
Try (assuming isUniversal is a class ):
$(".isUniversal").on('click',function(){
if ($("this").attr('checked') == 'checked') {
$('.vehicle-type-selector').removeAttr('checked').attr('disabled','disabled');
}
})
or
$(".isUniversal").on('click',function(){
if( $('this').is(":checked") ){
$('.vehicle-type-selector').removeAttr('checked').attr('disabled','disabled');
}
})

Change Text input value on checkbox select

I am trying to input the value of a checkbox into a text input.
Let's say that the input box is empty - you click on the checkbox, and the value assigned to the checbkox is being shown inside the input box.
$('input.lowercase').on('change', function(){
if ( $(this).is(':checked') ) {
$("input.qwer").on("keyup",function () {
$("input.qwer").html($(this).val());
}); } } );
No matter what I do I can't get this to work. Any help?
http://jsfiddle.net/6ycnzrty/
[EDITED] (As per your needs)
Demo on Fiddle
HTML:
<input type="text" class="output" value="" />
<br>
<input type="checkbox" class="qwer" value="qwerty">Input value of this checkbox(qwert)
<br>
<input type="checkbox" class="numbers" value="1234567890">Input value of this checkbox(numbers)
<br>
<input type="checkbox" class="asdfg" value="asdfg">Input value of this checkbox(asdfg)
<br>
<input type="checkbox" class="zxcvb" value="zxcvb">Input value of this checkbox(zxcvb)
JavaScript:
$('input.qwer').on('change', function () {
if ($(this).is(':checked')) {
$('.output').val($('.output').val() + $(this).val());
} else {
$('.output').val($('.output').val().replace($('.qwer').val(), ''));
}
});
$('input.numbers').on('change', function () {
if ($(this).is(':checked')) {
$('.output').val($('.output').val() + $(this).val());
} else {
$('.output').val($('.output').val().replace($('.numbers').val(), ''));
}
});
$('input.asdfg').on('change', function () {
if ($(this).is(':checked')) {
$('.output').val($('.output').val() + $(this).val());
} else {
$('.output').val($('.output').val().replace($('.asdfg').val(), ''));
}
});
$('input.zxcvb').on('change', function () {
if ($(this).is(':checked')) {
$('.output').val($('.output').val() + $(this).val());
} else {
$('.output').val($('.output').val().replace($('.zxcvb').val(), ''));
}
});
Try This :-
$('input.qwer').on('change', function(){
if ( $(this).is(':checked') ) {
$("input.output").val($(this).val());
}
else{ $("input.output").val("123"); }
});
With above code if checkbox is unchecked then textbox having class 'output' will get its initial view i.e '123',if you don't need this functionality then try this :
$('input.qwer').on('change', function(){
if ( $(this).is(':checked') ) {
$("input.output").val($(this).val());
}
});
EDIT :-
DEMO
Try
var $chk = $('input.qwer').on('change', function () {
//if the checkbox is checked and output is empty set the value
if (this.checked && !$output.val()) {
$output.val(this.value)
}
});
var $output = $("input.output").on("change", function () {
//when the value of output is changed as empty and checkbox is checked then set the value to checkbox
if (!this.value && $chk.is(':checked')) {
this.value = $chk.val();
}
});
Demo: Fiddle
$("input.qwer").on("change",function () {
if($(this).is(":checked"))
$("input.output").val($(this).val());
else
$("input.output").val("123");
});
DEMO

Javascript checkbox onChange

I have a checkbox in a form and I'd like it to work according to following scenario:
if someone checks it, the value of a textfield (totalCost) should be set to 10.
then, if I go back and uncheck it, a function calculate() sets the value of totalCost according to other parameters in the form.
So basically, I need the part where, when I check the checkbox I do one thing and when I uncheck it, I do another.
Pure javascript:
const checkbox = document.getElementById('myCheckbox')
checkbox.addEventListener('change', (event) => {
if (event.currentTarget.checked) {
alert('checked');
} else {
alert('not checked');
}
})
My Checkbox: <input id="myCheckbox" type="checkbox" />
function calc()
{
if (document.getElementById('xxx').checked)
{
document.getElementById('totalCost').value = 10;
} else {
calculate();
}
}
HTML
<input type="checkbox" id="xxx" name="xxx" onclick="calc();"/>
If you are using jQuery.. then I can suggest the following:
NOTE: I made some assumption here
$('#my_checkbox').click(function(){
if($(this).is(':checked')){
$('input[name="totalCost"]').val(10);
} else {
calculate();
}
});
Use an onclick event, because every click on a checkbox actually changes it.
The following solution makes use of jquery. Let's assume you have a checkbox with id of checkboxId.
const checkbox = $("#checkboxId");
checkbox.change(function(event) {
var checkbox = event.target;
if (checkbox.checked) {
//Checkbox has been checked
} else {
//Checkbox has been unchecked
}
});
HTML:
<input type="checkbox" onchange="handleChange(event)">
JS:
function handleChange(e) {
const {checked} = e.target;
}
Reference the checkbox by it's id and not with the #
Assign the function to the onclick attribute rather than using the change attribute
var checkbox = $("save_" + fieldName);
checkbox.onclick = function(event) {
var checkbox = event.target;
if (checkbox.checked) {
//Checkbox has been checked
} else {
//Checkbox has been unchecked
}
};
Javascript
// on toggle method
// to check status of checkbox
function onToggle() {
// check if checkbox is checked
if (document.querySelector('#my-checkbox').checked) {
// if checked
console.log('checked');
} else {
// if unchecked
console.log('unchecked');
}
}
HTML
<input id="my-checkbox" type="checkbox" onclick="onToggle()">
try
totalCost.value = checkbox.checked ? 10 : calculate();
function change(checkbox) {
totalCost.value = checkbox.checked ? 10 : calculate();
}
function calculate() {
return other.value*2;
}
input { display: block}
Checkbox: <input type="checkbox" onclick="change(this)"/>
Total cost: <input id="totalCost" type="number" value=5 />
Other: <input id="other" type="number" value=7 />
I know this seems like noob answer but I'm putting it here so that it can help others in the future.
Suppose you are building a table with a foreach loop. And at the same time adding checkboxes at the end.
<!-- Begin Loop-->
<tr>
<td><?=$criteria?></td>
<td><?=$indicator?></td>
<td><?=$target?></td>
<td>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="active" value="<?=$id?>" <?=$status?'checked':''?>>
<!-- mark as 'checked' if checkbox was selected on a previous save -->
</div>
</td>
</tr>
<!-- End of Loop -->
You place a button below the table with a hidden input:
<form method="post" action="/goalobj-review" id="goalobj">
<!-- we retrieve saved checkboxes & concatenate them into a string separated by commas.i.e. $saved_data = "1,2,3"; -->
<input type="hidden" name="result" id="selected" value="<?= $saved_data ?>>
<button type="submit" class="btn btn-info" form="goalobj">Submit Changes</button>
</form>
You can write your script like so:
<script type="text/javascript">
var checkboxes = document.getElementsByClassName('form-check-input');
var i;
var tid = setInterval(function () {
if (document.readyState !== "complete") {
return;
}
clearInterval(tid);
for(i=0;i<checkboxes.length;i++){
checkboxes[i].addEventListener('click',checkBoxValue);
}
},100);
function checkBoxValue(event) {
var selected = document.querySelector("input[id=selected]");
var result = 0;
if(this.checked) {
if(selected.value.length > 0) {
result = selected.value + "," + this.value;
document.querySelector("input[id=selected]").value = result;
} else {
result = this.value;
document.querySelector("input[id=selected]").value = result;
}
}
if(! this.checked) {
// trigger if unchecked. if checkbox is marked as 'checked' from a previous saved is deselected, this will also remove its corresponding value from our hidden input.
var compact = selected.value.split(","); // split string into array
var index = compact.indexOf(this.value); // return index of our selected checkbox
compact.splice(index,1); // removes 1 item at specified index
var newValue = compact.join(",") // returns a new string
document.querySelector("input[id=selected]").value = newValue;
}
}
</script>
The ids of your checkboxes will be submitted as a string "1,2" within the result variable. You can then break it up at the controller level however you want.

Categories