We Keep Coding

How to get all names of checked checkboxes?

At the end of my HTML site I want to show the name of all checked checkboxes.
For example, if I have following checkboxes:
<input type="checkbox" name="Product1" value="149" id="checkbox_1" autocomplete="off"/>
<input type="checkbox" name="Product2" value="249" id="checkbox_2" autocomplete="off"/>
<input type="checkbox" name="Product3" value="349" id="checkbox_3" autocomplete="off"/>
The name of all the ones who are checked, should be listed on any position on the same page without pressing a button.
Like this, if he choosed 2 and 3:
You choosed following products:
Product2
Product3
If he choosed nothing, nothing should appear.

var names = $(':checkbox:checked').map(function(){ return this.name; });
if (names.length) {
console.log(names.get().join(','));
}
It would be better if they had a shared class though, then you could make the selector better with
$('.theclass').filter(':checked').map(function(){ return this.name; });
//demo example
$(function(){
//get all the products
var $allProducts = $('.product');
//get the area to write the results to
var $selectedProductsListing = $('#selectedProducts');
//get the label
var $selectedProductsLabel = $('#selectedProductsLabel');
//when you click a checkbox, do the logic
$allProducts.on('click', function(){
//set the content of the results
$selectedProductsListing.html(
//only return those that are checked
$allProducts.filter(':checked').map(function(index, checkbox){
//return a div string with the name for display
return '<div>'+ checkbox.name +'</div>';
}).get().join('') //get the array of strings and join them by nothing
);
//hide the label if no checkboxes are selected
if ($selectedProductsListing.text().trim().length) {
$selectedProductsLabel.show();
} else {
$selectedProductsLabel.hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="Product1" value="149" class="product" id="checkbox_1" autocomplete="off"/>
<input type="checkbox" name="Product2" value="249" class="product" id="checkbox_2" autocomplete="off"/>
<input type="checkbox" name="Product3" value="349" class="product" id="checkbox_3" autocomplete="off"/>
<div id="selectedProductsLabel" style="display:none">Products Selected:</div>
<span id="selectedProducts"></span>

you could check below snippet:
$("input").click(function(){
var seList = $("input:checked").map(function(v){
return (this.name);
})
$("#info").html(seList.join("<br>"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input type="checkbox" name="Product1" value="149" id="checkbox_1" autocomplete="off"/>
<input type="checkbox" name="Product2" value="249" id="checkbox_2" autocomplete="off"/>
<input type="checkbox" name="Product3" value="349" id="checkbox_3" autocomplete="off"/>
<div id="info">
</div>

Enable/Disable Controls on selection of Radio using jquery

I am trying to Enable/Disable certain controls depending upon the selection of Radio. it doesn't seem to be working.
I want the disabled text and radio fields to be enabled when yes radio is selected.
Please help!
ASP snippet
<div class="form-group" >
<label class="control-label">Whether any other children of the same family is studying in Primary/ Secondary Section of SVVHS</label><br />
<input type="radio" value="yes" id="chkRelatedStudentYes" runat="server" name="RelatedStudent" required="required"/> <label class="control-label">Yes</label><br />
<input type="radio" value="no" id="chkRelatedStudentNo" runat="server" name="RelatedStudent" required="required"/> <label class="control-label">No</label>
</div>
<div class="form-group">
<label class="control-label">Name of the Student</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Name of the Related Student" id="txtRelatedStudentName" runat="server" disabled="disabled" />
</div>
<div class="form-group">
<label class="control-label">Section</label><br />
<input type="radio" value="Primary" id="chkPrimary" runat="server" name="Section" required="required" disabled="disabled"/> <label class="control-label">Primary</label><br />
<input type="radio" value="Secondary" id="chkSecondary" runat="server" name="Section" required="required" disabled="disabled"/> <label class="control-label">Secondary</label>
</div>
<div class="form-group">
<label class="control-label">Standard</label>
<input maxlength="12" type="text" required="required" class="form-control" placeholder="Enter Standard of the Related Student" id="txtStandard" runat="server" disabled="disabled"/>
</div>
<div class="form-group">
<label class="control-label">Division</label>
<input maxlength="12" type="text" required="required" class="form-control" placeholder="Enter Division of the Related Student" id="txtDivision" runat="server" disabled="disabled"/>
</div>
jquery snippet
<script type="text/javascript">
$('#chkRelatedStudentYes').click(function () {
$('#txtRelatedStudentName').removeAttr("disabled");
$('#chkPrimary').removeAttr("disabled");
$('#chkSecondary').removeAttr("disabled");
$('#txtStandard').removeAttr("disabled");
$('#txtDivision').removeAttr("disabled");
});
$('#chkRelatedStudentNo').click(function () {
$('#txtRelatedStudentName').attr("disabled", "disabled");
$('#chkPrimary').attr("disabled", "disabled");
$('#chkSecondary').attr("disabled", "disabled");
$('#txtStandard').attr("disabled", "disabled");
$('#txtDivision').attr("disabled", "disabled");
});
</script>

Hi your way of triggering event is wrong
Please try this, here is complete code that should work
Note : Tested it
$(document).ready(function() {
$("input[name=RelatedStudent]:radio").click(function() { // attack a click event on all radio buttons with name 'radiogroup'
if($(this).val() == 'yes') {//check which radio button is clicked
$('#txtRelatedStudentName').removeAttr("disabled");
$('#chkPrimary').removeAttr("disabled");
$('#chkSecondary').removeAttr("disabled");
$('#txtStandard').removeAttr("disabled");
$('#txtDivision').removeAttr("disabled");
} else if($(this).val() == 'no') {
$('#txtRelatedStudentName').attr("disabled", "disabled");
$('#chkPrimary').attr("disabled", "disabled");
$('#chkSecondary').attr("disabled", "disabled");
$('#txtStandard').attr("disabled", "disabled");
$('#txtDivision').attr("disabled", "disabled");
}
});
});
You can try it here https://jsfiddle.net/abhiyx/fgen1br9/

You could use jQuery prop() method instead of removeAttr(). Try this -
$('#chkRelatedStudentYes').click(function () {
$('#txtRelatedStudentName').prop("disabled", false);
$('#chkPrimary').prop("disabled", false);
$('#chkSecondary').prop("disabled", false);
$('#txtStandard').prop("disabled", false);
$('#txtDivision').prop("disabled", false);
});

I found what the problem was.
The script wasn't able to find the element by ID or its NAME attribute.
I tried all the possible way to fire the script on click of the element and realized that it was working when i used - $("input[type=radio]:radio")
and also using the class name - $(".form-control") I modified the script and used the below script and boom it worked
$("input[type=radio]:radio").click(function () {
if ($(this).val() == 'yes') {
$(".form-control-disable").removeAttr("disabled");
}
else if ($(this).val() == 'no') {
$(".form-control-disable").attr("disabled", "disabled");
}
});
I used the following class for the text and radio controls that had to be disabled ".form-control-disable" and it worked.
I thank Abhi for his patience and help. :)

Since the html elements is rendered on the server, the IDs of the elements will change.
While access the IDs in javascript, Please use as following:
$('#<%# chkRelatedStudentYes.ClientID%>').removeAttr("disabled");

display data on selecting a checkbox

I have 3 checkboxes
<input type="checkbox" name ="chk[]" id="inlineCheckbox1" value="Permanent">Permanent
<input type="checkbox" name ="chk[]" id="inlineCheckbox2" value="Drive">Drive
<input type="checkbox" name ="chk[]" id="inlineCheckbox3" value="Contract"> Contract
and a div that contains 2 inputs
<div id="datetime">
<input type='text' class="form-control" name="datee">
<input type='text' class="form-control" name="timee" >
</div>
Checkbox Permanent and Contract can be selected normally, but i want that till the time Drive checkbox is not selected, the div should stay disabled, when the user selects Drive, he should be able to select values from div and if he again unchecks the Drive checkbox the div should get disabled again.
I tried to follow this code but it didnt seemed to work for me, can anyone please tell how it can be done

You could disable/enable the time controls like this:
function setDateTimeAvailability() {
var checked = $("#inlineCheckbox2").is(':checked');
$("#datetime input").attr('disabled', !checked);
// Or, if you prefer to hide, do:
// $("#datetime").toggle(checked);
}
$("#inlineCheckbox2").change(setDateTimeAvailability);
// Make sure on page load the datetime availability is set correctly
$(setDateTimeAvailability);
Here is a fiddle.

Try this out:
Required Library: <script
src="//code.jquery.com/jquery-1.11.3.min.js">
$(function() {
HideDiv();
});
$("#inlineCheckbox2").on('change', function() {
HideDiv();
});
function HideDiv() {
if ($("#inlineCheckbox2").is(':checked')) {
$("#datetime").show();
} else {
$("#datetime").hide();
}
}

Try below code :
<head>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
</head>
<body>
<input type="checkbox" name ="chk[]" id="inlineCheckbox1" value="Permanent">Permanent
<input type="checkbox" name ="chk[]" id="inlineCheckbox2" value="Drive">Drive
<input type="checkbox" name ="chk[]" id="inlineCheckbox3" value="Contract"> Contract
<div id="datetime" style="display:none;">
<input type='text' class="form-control" name="datee">
<input type='text' class="form-control" name="timee" >
</div>
<script>
$("#inlineCheckbox2").change(function(){
if($(this).is(':checked')){
$("#datetime").show();
} else{
$("#datetime").hide();
}
});
</script>
</body>

$(document).ready(function() {
$("#inlineCheckbox2").change(function() {
//dissable if check box not selected
var dissable = !$(this).is(':checked');
//set all .form-controls dissabled
$('.form-control').each(function() {
$(this).attr('disabled', dissable);
});
});
//set initail status
$("#inlineCheckbox2").trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="chk[]" id="inlineCheckbox1" value="Permanent">Permanent
<input type="checkbox" name="chk[]" id="inlineCheckbox2" value="Drive">Drive
<input type="checkbox" name="chk[]" id="inlineCheckbox3" value="Contract">Contract
<div id="datetime">
<input type='text' class="form-control" name="datee">
<input type='text' class="form-control" name="timee">
</div>

Check this one:
<script type="text/javascript">
$(document).ready(function(){
$(".form-control").prop('disabled', true);
$('#inlineCheckbox2').change(function(){
var checked = $("#inlineCheckbox2").is(':checked');
if (checked == true)
{
$(".form-control").prop('disabled', false);
}
else
{
$(".form-control").prop('disabled', true);
}
});
});
Check Here

The shortest way to do this (in terms of code text) is to give the Drive checkbox a jQuery script to run when its value is changed:
onchange=$('#datetime').children().prop('disabled',
!$(this).prop('checked'))
And let the date and time inputs be disabled when the document loads.

In Laravel 5.1 Can't post value of checkbox

I have 2 checkboxs inside a form, I can't post value of them.
I have already tried this:
<div class="form-group col-md-4">
<label class="col-md-6" for="invoiced">
<input type="checkbox" id="invoiced" value="false" name="project[invoiced]">
Invoiced </label>
<label class="col-md-6" for="tobeinvoiced">
<input type="checkbox" id="tobeinvoiced" value="true" name="project[tobeinvoiced]" checked>
To be Invoiced </label>
</div>
with this script that changes the value of 2 checkboxes in true or false:
<script type="text/javascript">
$('#tobeinvoiced').change(function(){
cb = $(this);
cb.val(cb.prop('checked'));
});
$('#invoiced').change(function(){
cb = $(this);
cb.val(cb.prop('checked'));
});
</script>
but when I submit, the values passed are set to null.

Try this
$project = $request->input('project');
$tobeinvoiced = $project['tobeinvoiced'];
Basically the naming convention you are using makes it an array and you cant call an array directly in request input in laravel
Hope this helps.

I've found the solution to my problem, this is the link : Solution.
My code became:
<label class="col-md-6" for="invoiced">
<input type="checkbox" key="invoiced"/>
<input type="hidden" id="invoiced" value="0" name="project[invoiced]">
Invoiced </label>
<label class="col-md-6" for="tobeinvoiced">
<input type="checkbox" key="tobeinvoiced" checked/>
<input type="hidden" id="tobeinvoiced" value="1" name="project[tobeinvoiced]">
To be Invoiced </label>
with this script:
$(document).ready(function () {
$('[key]').change(function () {
var key = $(this).attr('key');
$($('[name="project[' + key + ']"]')).val($(this).is(':checked') ? 'true' : 'false');
});
});

JQUERY: Change value from text input having a checkbox selected

I need to change the value of a text input only if a checkbox is selected. Both inputs (text and checkbox) have the same class:
<label for="text_to_apply">Write your text: </label>
<input type="text" id="text_to_apply" name="text_to_apply" value="">
<button type="button" id="btn_apply">Change</button>
<form id="theform">
<input type="text" value="1" id="one1" class="one"><input type="checkbox" id="one1_" class="one"><br>
<input type="text" value="1" id="one2" class="one"><input type="checkbox" id="one2_" class="one"><br>
<input type="text" value="1" id="one3" class="one"><input type="checkbox" id="one3_" class="one"><br>
<input type="text" value="1" id="one4" class="one"><input type="checkbox" id="one4_" class="one"><br>
<input type="text" value="2" id="two1" class="two"><input type="checkbox" id="two1_" class="two"><br>
</form>
</div>
<script>
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
if ($('#theform').find('.one input:checked')) {
$('#theform').find('.one:text').attr('value', mytext);
}
});
</script>
</body>
I am running out of ideas. Please Help!
Thanks!!

If I got your question right - it will look like this:
$('#btn_apply').click(function() {
if ($('#yourCheckboxId').is(':checked')){
$('#inputId').val('some text you want');
}
});
Here is fiddle http://jsfiddle.net/Goodluck/2XBcK/

Try
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
$('#theform').find('input:checked').each(function(){
$(this).prev().val(mytext);
});
});
DEMO

There is no :text in jQuery that I'm aware of. Presuming your HTML stays the same, you can use the .prev() method to target the input before each input:checked.
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
if ($('#theform').find('input:checked')) {
$('#theform').find('input:checked').prev('input').attr('value', mytext);
}
});
Fiddle: http://jsfiddle.net/willthemoor/5qmH8/