Can't get checked checkboxes in jquery - javascript

I'm trying to fill an array but jquery isn't finding the checked checkboxes
$('input[name="frequency"]:checked').map(function() {
frequencies.push($(this).val());
});
<div id="frequencyCheckboxes" class="btn-group" data-toggle="buttons" style="width:270px;">
<label class="btn btn-primary" for="cbm">
<input id="cbM" name="frequency" value="M" type="checkbox" autocomplete="off">M
</label>
<label class="btn btn-primary" for="cbW1">
<input id="cbW1" name="frequency" value="W1" type="checkbox" autocomplete="off">W1
</label>
<label class="btn btn-primary" for="cbW2">
<input id="cbW2" name="frequency" value="W2" type="checkbox" autocomplete="off">W2
</label>
<label class="btn btn-primary" for="cbW3">
<input id="cbW3" name="frequency" value="W3" type="checkbox" autocomplete="off">W3
</label>
<label class="btn btn-primary" for="cbW4">
<input id="cbW4" name="frequency" value="W4" type="checkbox" autocomplete="off">W4
</label>
<label class="btn btn-primary" for="cbW5">
<input id="cbW5" name="frequency" value="W5" type="checkbox" autocomplete="off">W5
</label>
</div>

Can you try below?
var frequencies = [];
$('input[name="frequency"]').click(function() {
frequencies.push($(this).val());
});

i think using each instead map should works
$(input[name="frequency"]).click(function(){
$('input[name="frequency"]:checked').each(function(i,el) {
frequencies.push($(el).val());
})
});

Related

How to disabled / enable checkboxes on load with jquery?

I want to load the checkboxes enabled where the .group is checked. And disabled ones where .group is unchecked. I can switch them but cannot disabled the unchecked .group to disabled.
Upon loading, I expect all zones in Group 2 clickable.
While all in Group 1 are grayed out but clickable later.
As well as when I uncheck the Group checkbox. All the zone must be disabled. They will only clickable when a Group is checked.
$(function() {
enable_cb();
$(".group").click(enable_cb);
$(".zone").attr("disabled",true);//disabled by default
});
function enable_cb() {
$(this).closest('div').find(".zone").prop("disabled", !this.checked);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<table>
<tr>
<td>
<div class="btn-group w-100" role="group">
<input type="checkbox" class="btn-check group" id="g_1" name="g_1" autocomplete="off" />
<label class="btn btn-outline-success" for="g_1">Group 1</label>
<input type="checkbox" class="btn-check zone" id="zone_1a" name="zone_1a" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_1a">Zone A</label>
<input type="checkbox" class="btn-check zone" id="zone_1b" name="zone_1b" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_1b">Zone B</label>
<input type="checkbox" class="btn-check zone" id="zone_1c" name="zone_1c" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_1c">Zone C</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="btn-group w-100" role="group">
<input type="checkbox" class="btn-check group" id="g_2" name="g_2" checked autocomplete="off" />
<label class="btn btn-outline-success" for="g_2">Group 2</label>
<input type="checkbox" class="btn-check zone" id="zone_2a" name="zone_2a" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_2a">Zone A</label>
<input type="checkbox" class="btn-check zone" id="zone_2b" name="zone_2b" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_2b">Zone B</label>
<input type="checkbox" class="btn-check zone" id="zone_2c" name="zone_2c" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_2c">Zone C</label>
</div>
</td>
</tr>
</table>
Please find the fiddle here : https://jsfiddle.net/b50gwmzu/
Iterate the unchecked group checkboxes and disable their siblings and themselves
$("input.group").not(':checked').each(function(){
$(this).siblings(':checkbox').addBack().prop('disabled', true);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<table>
<tr>
<td>
<div class="btn-group w-100" role="group">
<input type="checkbox" class="btn-check group" id="g_1" name="g_1" autocomplete="off" />
<label class="btn btn-outline-success" for="g_1">Group 1</label>
<input type="checkbox" class="btn-check zone" id="zone_1a" name="zone_1a" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_1a">Zone A</label>
<input type="checkbox" class="btn-check zone" id="zone_1b" name="zone_1b" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_1b">Zone B</label>
<input type="checkbox" class="btn-check zone" id="zone_1c" name="zone_1c" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_1c">Zone C</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="btn-group w-100" role="group">
<input type="checkbox" class="btn-check group" id="g_2" name="g_2" checked autocomplete="off" />
<label class="btn btn-outline-success" for="g_2">Group 2</label>
<input type="checkbox" class="btn-check zone" id="zone_2a" name="zone_2a" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_2a">Zone A</label>
<input type="checkbox" class="btn-check zone" id="zone_2b" name="zone_2b" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_2b">Zone B</label>
<input type="checkbox" class="btn-check zone" id="zone_2c" name="zone_2c" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_2c">Zone C</label>
</div>
</td>
</tr>
</table>
Consider the following.
$(function() {
function toggleZones(zIndex) {
var status = $("#g_" + zIndex).is(":checked");
$("input[id^='zone_" + zIndex + "']").prop("disabled", !status);
}
$(".group").change(function() {
toggleZones($(this).attr("id").slice(-1));
});
$(".group").each(function(i, el) {
toggleZones($(el).attr("id").slice(-1));
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<table>
<tr>
<td>
<div class="btn-group w-100" role="group">
<input type="checkbox" class="btn-check group" id="g_1" name="g_1" autocomplete="off" />
<label class="btn btn-outline-success" for="g_1">Group 1</label>
<input type="checkbox" class="btn-check zone" id="zone_1a" name="zone_1a" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_1a">Zone A</label>
<input type="checkbox" class="btn-check zone" id="zone_1b" name="zone_1b" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_1b">Zone B</label>
<input type="checkbox" class="btn-check zone" id="zone_1c" name="zone_1c" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_1c">Zone C</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="btn-group w-100" role="group">
<input type="checkbox" class="btn-check group" id="g_2" name="g_2" checked autocomplete="off" />
<label class="btn btn-outline-success" for="g_2">Group 2</label>
<input type="checkbox" class="btn-check zone" id="zone_2a" name="zone_2a" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_2a">Zone A</label>
<input type="checkbox" class="btn-check zone" id="zone_2b" name="zone_2b" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_2b">Zone B</label>
<input type="checkbox" class="btn-check zone" id="zone_2c" name="zone_2c" autocomplete="off" />
<label class="btn btn-outline-success" for="zone_2c">Zone C</label>
</div>
</td>
</tr>
</table>
Clicking one of the Groups will Toggle if it is Enabled or Disabled.

AJAX - JSON undefined (jQuery, NodeJS)

I'm currently struggling with an ajax that posts a json to a nodejs route. I want to get the selected values of 4 button-groups. The button-groups have the following ids: quality, costeffectiveness, deliveryscope and rating. Each button-group contains 5 radio-buttons with a value with an own id, such as quality1 or quality2. The values of these buttons range from 1 to 5.
My guess is that I'm missing out things mentioned here: How do I return the response from an asynchronous call?
$(document).ready(function () {
// SUBMIT FORM
$("#ratingForm").submit(function (event) {
// Prevent the form from submitting via the browser.
event.preventDefault();
ajaxPost();
});
function ajaxPost() {
// PREPARE FORM DATA
let ratingData = {
quality: $('input[name=options]:checked', '#quality').val(),
costeffectiveness: $('input[name=options]:checked', '#costeffectiveness').val(),
deliveryscope: $('input[name=options]:checked', '#deliveryscope').val(),
contentment: $('input[name=options]:checked', '#contentment').val()
};
// DO POST
$.ajax({
type: "POST",
contentType: "application/json",
url: "/rating",
data: JSON.stringify(ratingData),
dataType: 'json',
success: function (rating) {
$("#ratingResultDiv").html("<p>" +
"Post Successfully! <br>" +
"--->" + JSON.stringify(rating) + "</p>");
},
error: function (e) {
alert("Error!");
console.log("ERROR: ", e);
}
});
}
});
When I'm assigning variables in a different kind of way and change the route for the expected json, it works like a charm:
// PREPARE FORM DATA
let formData = {
firstname: $("#firstname").val(),
lastname: $("#lastname").val()
};
Working.
NodeJS Route:
router.post('/rating', function (req, res, next) {
console.log("RATINGS: " + JSON.stringify(req.body));
console.log(req.body.quality);
console.log(req.body.costeffectiveness);
console.log(req.body.deliveryscope);
console.log(req.body.contentment);
let rating = {};
rating.quality= req.body.quality;
rating.costeffectiveness = req.body.costeffectiveness;
rating.deliveryscope = req.body.deliveryscope;
rating.contentment = req.body.contentment;
return res.send(rating);
HTML:
<form method="POST" action="/rating">
<form id="ratingForm">
<div class="form-group">
<p class="my-2">Quality</p>
<div class="btn-group btn-group-lg btn-group-toggle" id="quality"
data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="quality" id="quality1" value="1"
autocomplete="off" checked>
1
</label>
<label class="btn btn-primary">
<input type="radio" name="quality" id="quality2" value="2"
autocomplete="off"> 2
</label>
<label class="btn btn-primary">
<input type="radio" name="quality" id="quality3" value="3"
autocomplete="off"> 3
</label>
<label class="btn btn-primary">
<input type="radio" name="quality" id="quality4" value="4"
autocomplete="off"> 4
</label>
<label class="btn btn-primary">
<input type="radio" name="quality" id="quality5" value="5"
autocomplete="off"> 5
</label>
</div>
<p class="my-2">Cost Effectiveness</p>
<div class="btn-group btn-group-lg btn-group-toggle" id="cost-effectiveness"
data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="costeffectiveness" id="cost_effectiveness1" value="1"
autocomplete="off"
checked> 1
</label>
<label class="btn btn-secondary">
<input type="radio" name="costeffectiveness" id="cost_effectiveness2" value="2"
autocomplete="off">
2
</label>
<label class="btn btn-secondary">
<input type="radio" name="costeffectiveness" id="cost_effectiveness3" value="3"
autocomplete="off">
3
</label>
<label class="btn btn-secondary">
<input type="radio" name="costeffectiveness" id="cost_effectiveness4" value="4"
autocomplete="off">
4
</label>
<label class="btn btn-secondary">
<input type="radio" name="costeffectiveness" id="cost_effectiveness5" value="5"
autocomplete="off">
5
</label>
</div>
<p class="my-2">Delivery Scope</p>
<div class="btn-group btn-group-lg btn-group-toggle" id="delivery-scope"
data-toggle="buttons">
<label class="btn btn-info active">
<input type="radio" name="deliveryscope" id="delivery_scope1" value="1"
autocomplete="off"
checked> 1
</label>
<label class="btn btn-info">
<input type="radio" name="deliveryscope" id="delivery_scope2" value="2"
autocomplete="off">
2
</label>
<label class="btn btn-info">
<input type="radio" name="deliveryscope" id="delivery_scope3" value="3"
autocomplete="off">
3
</label>
<label class="btn btn-info">
<input type="radio" name="deliveryscope" id="delivery_scope4" value="4"
autocomplete="off">
4
</label>
<label class="btn btn-info">
<input type="radio" name="deliveryscope" id="delivery_scope5" value="5"
autocomplete="off">
5
</label>
</div>
<p class="my-2">Contentment</p>
<div class="btn-group btn-group-lg btn-group-toggle" id="contentment"
data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="contentment" id="contentment1" value="1"
autocomplete="off"
checked>
1
</label>
<label class="btn btn-secondary">
<input type="radio" name="contentment" id="contentment2" value="2"
autocomplete="off"> 2
</label>
<label class="btn btn-secondary">
<input type="radio" name="contentment" id="contentment3" value="3"
autocomplete="off"> 3
</label>
<label class="btn btn-secondary">
<input type="radio" name="contentment" id="contentment4" value="4"
autocomplete="off"> 4
</label>
<label class="btn btn-secondary">
<input type="radio" name="contentment" id="contentment5" value="5"
autocomplete="off"> 5
</label>
</div>
<div class="modal-footer my-4">
<button type="submit" class="btn btn-lg btn-primary btn-block">Submit rating
</button>
</div>
</div>
</form>
</form>
let req = JSON.parse(req);
Try to put this on your node js script
Problem is in your jQuery selectors. It should be
let ratingData = {
quality: $('#quality input[name=options]:checked').val(),
costeffectiveness: $('#costeffectiveness input[name=options]:checked').val(),
deliveryscope: $('#deliveryscope input[name=options]:checked').val(),
contentment: $('#contentment input[name=options]:checked').val()
};
The problem was, that each button in the button group had the same name. As soon as I gave the buttons in a group an individual name, the values were accessible in json. I'm going to edit my code in the question.

Double clicking detected with jquery on click

I have a div like so
$('.btn-group label').unbind().click(function() {
$(this).toggleClass('active');
var checked = $(this).find('input').prop('checked');
console.log(checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>
which has a bug, when I check the console result for a click I get two results false and true from this jquery function
how can I log only the valid one which is true?
On jsfiddle it's working however without double logging https://jsfiddle.net/8wtLc8b6/
Do with change event instead of click
$('.btn-group label').change(function(e) {
$(this).toggleClass('active');
var checked = $(this).find('input').prop('checked');
console.log(checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>
Why?
Change event run after the changes append in input
$('.btn-group label').change(function(){
console.log('change') //its run only on completely changed
}).click(function(e) {
console.log('click'); //its run before and after changing
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>

Yii2: How to disable radio button

<?php echo $form->field($model, 'status')->radioButtonGroup($model->getStatusList(), ['disabledItems'=>['APPROVED','DIGITAL','CDP']],
[
'class' => 'btn-group-sm',
'itemOptions' => ['labelOptions' => ['class' => 'btn btn-warning']]
]);
?>
I want to disable all previous radio buttons from currently checked.
As I showed in image status 'APPROVED','DIGITAL','CDP' are disabled because status print is selected. I have put these three status in disabled function but how to achieve this using jQuery.
PS- Using Yii2
HTML Code-
<div class="form-group field-status-status required">
<label class="control-label" for="status-status">Status</label>
<input type="hidden" name="Status[status]" value="">
<div id="status-status" class="btn-group" data-toggle="buttons">
<label class="btn btn-default disabled">
<input type="radio" name="Status[status]" value="APPROVED" disabled> Approved</label>
<label class="btn btn-default disabled">
<input type="radio" name="Status[status]" value="DIGITAL" disabled> Digital</label>
<label class="btn btn-default disabled">
<input type="radio" name="Status[status]" value="CDP" disabled> CDP</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="PRINT"> Print</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="OTHERPROCESS"> OtherProcess</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="PACKING"> Packing</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="DISPATCH"> Dispatch</label>
</div>
You can use prop to disable radio buttons.
$(':radio:checked').closest('label').prevAll('label :radio').prop('disabled', true);
Demo:
$(':radio').on('change', function() {
$(':radio:checked').closest('label').prevAll('label').addClass('disabled').children(':radio').prop('disabled', true);
}).trigger('change');
.disabled {
color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="form-group field-status-status required">
<label class="control-label" for="status-status">Status</label>
<input type="hidden" name="Status[status]" value="">
<div id="status-status" class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="APPROVED">Approved</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="DIGITAL">Digital</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="CDP" checked>CDP</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="PRINT">Print</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="OTHERPROCESS">OtherProcess</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="PACKING">Packing</label>
<label class="btn btn-default">
<input type="radio" name="Status[status]" value="DISPATCH">Dispatch</label>
</div>

get child element that gets selected inside div element [duplicate]

This question already has answers here:
In jQuery, how do I select an element by its name attribute?
(18 answers)
Closed 7 years ago.
How do I get the radio button that is checked from inside my div
Here is my jquery but c is returning undefined
$('#SpaceType').change(function () {
var kids = $(this).children();
$(kids).each(function() {
var c = $(this).data('id');
});
});
Here is my div
<div class="btn-group" data-toggle="buttons" id="SpaceType">
<label id="SpaceTypeLabelHouse" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="0"> House
</label>
<label id="SpaceTypeLabelApartment" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="1"> Apartment
</label>
<label id="SpaceTypeLabelStudio" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="2"> Studio
</label>
<label id="SpaceTypeLabelOther" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="3"> Other
</label>
</div>
Use the :checked selector
$('#SpaceType').change(function () {
var c = $(this).find(':checked').attr('id');
alert(c)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="SpaceType">
<label id="SpaceTypeLabelHouse" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="0"> House
</label>
<label id="SpaceTypeLabelApartment" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="1"> Apartment
</label>
<label id="SpaceTypeLabelStudio" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="2"> Studio
</label>
<label id="SpaceTypeLabelOther" class="btn btn-primary">
<input type="radio" name="typeoptions" autocomplete="off" id="3"> Other
</label>
</div>
In your case you are iterating over the children of SpaceType which are the label elements and they don't have an id, also you are reading the data called id not the id attribute.

Categories

Resources