How can I use jQuery to delete the text in the textarea that gets from the input_one when it not checked (one_1 one_3 one_4) ,and when it checked add it into textarea again?
The code is below:
<div id="input_one">
<input type="checkbox" value="one">
<input type="checkbox" value="one_1">
<input type="checkbox" value="one_2">
<input type="checkbox" value="one_3">
<input type="checkbox" value="one_4">
</div>
<div id="input_two">
<input type="checkbox" value="two_1">
<input type="checkbox" value="two_2">
<input type="checkbox" value="two_3">
<input type="checkbox" value="two_4">
<input type="checkbox" value="two_5">
</div>
<textarea id="get_checked"></textarea>
For example textarea value should be one one_3 two_4
Hope this helps
function updateTextArea() {
var allVals = [];
$('#input_one :checked,#input_two :checked').each(function () {
allVals.push($(this).val());
});
$('#get_checked').val(allVals);
}
$(function () {
$('#input_one input,#input_two input').click(updateTextArea);
});
jsfiddle
You can select checked checkbox using :checked selector and use .map() to replace item of checkboxs array with value of it.
$("#input_one :checkbox, #input_two :checkbox").change(function() {
var text = $("#input_one :checked, #input_two :checked").map(function() {
return this.value;
}).get().join(" ");
$("#get_checked").val(text);
});
$(":checkbox").change(function() {
var text = $(":checked").map(function() {
return this.value;
}).get().join(" ");
$("#get_checked").val(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input_one">
<input type="checkbox" value="one" />
<input type="checkbox" value="one_1" />
<input type="checkbox" value="one_2" />
<input type="checkbox" value="one_3" />
<input type="checkbox" value="one_4" />
</div>
<div id="input_two">
<input type="checkbox" value="two_1" />
<input type="checkbox" value="two_2" />
<input type="checkbox" value="two_3" />
<input type="checkbox" value="two_4" />
<input type="checkbox" value="two_5" />
</div>
<textarea id="get_checked"></textarea>
As you said in question, the resutl text splited by space.
Related
I have a sequence of checkboxes that can be disabled or not through the disabled in the input tag
By clicking on the parent checkbox, I need only those NOT disabled to be checked
Current and desired:
Code so far:
$("#checkAll").click(function () {
$("input:checkbox").not(this).prop("checked", this.checked);
});
You could use the :not() selector combined with the has attribute selector :
$("#checkAll").change(function () {
$("input:checkbox:not([disabled])").prop("checked", this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll" />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />
As suggested by #connexo, you should use .change() instead of .click(). See this answer for more information.
Vanilla JS, always preferred:
document.getElementById('checkAll').addEventListener('change', function() {
for (const cb of document.querySelectorAll('input[type=checkbox]:not([disabled])')) {
if (cb !== this) cb.checked = this.checked;
}
});
<input type="checkbox" id="checkAll" />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />
Before I had used the class for getting the value of checked checkbox storing in array.
<div class="form-check">
<div class="form-group">
<label> <input id="check_id" type="checkbox"
value=1 class="chk" /> <span>Invoice</span>
</label>
<label> <input id="check_id" type="checkbox"
value=2 class="chk" /> <span>Packing List</span>
</label>
</div>
</div>
And it was successfully stored in array as :
$(".chk").click(function() {
getValueUsingClass();
});
function getValueUsingClass(){
$(':checkbox:checked').each(function(i){
chkArray[i] = $(this).val();
});
}
It was working fine until i changed the class name from .chk1 and .chk2. So I needed to change the class to chk1 and chk2
<div class="form-check">
<div class="form-group">
<label> <input id="check_id" type="checkbox"
value=1 class="chk1" /> <span>Invoice</span>
</label>
<label> <input id="check_id" type="checkbox"
value=2 class="chk2" /> <span>Packing List</span>
</label>
</div>
</div>
There may be more than these 2 checkboxes(I have only shown 2 as it is dynamic) there may be checkbox from .chk1 to .chk15 .How can i store checked checkbox in array when their class name is different?
Try this code
$("input[class^=chk]").click(function() {
$('#result').html(getValueUsingClass().join(" | "));
});
function getValueUsingClass(){
var arr = [];
$(':checkbox:checked').each(function(){
arr.push($(this).val());
});
return arr;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
<div class="form-group">
<label> <input id="check_id1" type="checkbox"
value=1 class="chk1" /> <span>Invoice</span>
</label>
<label> <input id="check_id2" type="checkbox"
value=2 class="chk2" /> <span>Packing List</span>
</label>
</div>
</div><div id="result"></div>
Please let me know your views over it.
Try using the Starts with from jQuery Starts with selector.
You can use this as $(input[class^='chk'])
$('input[class^="chk"]').click(function() {
var arr = getValueUsingClass();
console.log(arr);
});
function getValueUsingClass() {
var chkArray = [];
$('input[class^="chk"]:checkbox:checked').each(function(i) {
chkArray[i] = $(this).val();
});
return chkArray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="form-check">
<div class="form-group">
<label> <input type="checkbox"
value=1 class="chk1" /> <span>Invoice</span>
</label>
<label> <input type="checkbox"
value=2 class="chk2" /> <span>Packing List</span>
</label>
</div>
</div>
You can use jQuery's Attribute Starts With Selector that selects elements that have the specified attribute with a value beginning exactly with a given string.
Please Note: The attribute id must be unique in a document.
$("input[class^=chk]").click(function() {
getValueUsingClass();
});
function getValueUsingClass(){
var chkArray = [];
$(':checkbox:checked').each(function(i){
chkArray.push($(this).val());
});
console.log(chkArray);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
<div class="form-group">
<label> <input id="check_id1" type="checkbox"
value=1 class="chk1" /> <span>Invoice</span>
</label>
<label> <input id="check_id2" type="checkbox"
value=2 class="chk2" /> <span>Packing List</span>
</label>
</div>
</div>
you can achieve this without any class name:
function getValueUsingClass(){
$('input[type="checkbox"]:checked').each(function(i){
chkArray[i] = $(this).val();
});
}
I have this HTML:
<form id="my form">
<input type="checkbox" name="interest" value="swim"/>
<input type="checkbox" name="interest" value="baseball"/>
<input type="checkbox" name="interest" value="basketball"/>
<input type="checkbox" name="interest" value="badminton"/>
<input type="checkbox" name="interest" value="running"/>
</form>
And I want to show the result in <p onclick=""></p>
How do I type javascript to reveal what I choose in "checkbox"?
First of all you have provided a valid value for id. Instead of "my form", you can put "myform" or whatever but alphanumeric values which can not start with number.
<form id="myform">
<input type="checkbox" name="interest" value="swim"/>
<input type="checkbox" name="interest" value="baseball"/>
<input type="checkbox" name="interest" value="basketball"/>
<input type="checkbox" name="interest" value="badminton"/>
<input type="checkbox" name="interest" value="running"/>
</form>
<p id="pResult" onclick="showCheckedValues(event);"></p>
In Javascript you can collect all checkboxes and in <p> element put a function which will check, checked checkboxes and place their concated values like
<script>
var checkboxes;
function showCheckedValues(ev){
var pElement = ev.target;
if(checkboxes){
var checkedValues= [];
checkboxes.forEach(function(x){
if(x.checked){
checkedValues.push(x.value)
}
});
pElement.innerHTML = checkedValues.join(',');
}
}
window.onload = function(){
checkboxes = document.querySelectorAll('input[type=checkbox]');
}
</script>
I try to store the length of a form on a variable but it doesnt work.This is my first attempt with javascript.
var lista = new Array();
var numOfEl = document.psonia.elements.length;
function ektipwsi() {
for(var i=0; i < numOfEl ; i++){
if(document.psonia.elements[i].checked) {
lista.push(document.psonia.elements[i].value);
}
};
I also tried with getElementById or getElementByTag with no luck.
This is the entire form i use
<div>
<form name="psonia">
<div class = "laxanika">
<h2 class="epik">Λαχανικά</h2>
<div class="transp">
<input type="checkbox" value="Ντομάτες">Ντομάτες<br>
<input type="checkbox" value="Πατάτες">Πατάτες<br>
<input type="checkbox" value="Αγγούρια">Αγγούρια<br>
<input type="checkbox" value="Μελιτζάνες">Μελιτζάνες<br>
<input type="checkbox" value="Κρεμμύδια">Κρεμμύδια<br>
<input type="checkbox" value="Κρεμ.Στιφ.">Κρεμ.Στιφ.<br>
<input type="checkbox" value="Μαρούλι">Μαρούλι<br>
<input type="checkbox" value="Λάχανο">Λάχανο<br>
<input type="checkbox" value="Πιπεριές">Πιπεριές<br>
<input type="checkbox" value="Φλωρίνης">Φλωρίνης<br>
<input type="checkbox" value="Σκόρδα">Σκόρδα<br>
<input type="checkbox" value="Ρόκα">Ρόκα<br>
<input type="checkbox" value="Κολοκύθια">Κολοκύθια<br>
<input type="checkbox" value="Μανιτάρια">Μανιτάρια<br>
</div>
</div>
<div class="kreata">
<h2 class="epik">Κρέατα</h2>
<div class="transp">
<input type="checkbox" value="Λαιμός">Λαιμός<br>
<input type="checkbox" value="Χοιρινές">Χοιρινές<br>
<input type="checkbox" value="Μοσχαρίσιες">Μοσχαρίσιες<br>
<input type="checkbox" value="Παϊδάκια">Παϊδάκια<br>
<input type="checkbox" value="Κοτόπουλο">Κοτόπουλο<br>
<input type="checkbox" value="Μοσχάρι">Μοσχάρι<br>
<input type="checkbox" value="Κατσίκι">Κατσίκι<br>
<input type="checkbox" value="Κιμάς">Κιμάς<br>
</div>
<div class="galaktokomika">
<h2 class="epik">Γαλακτοκομικά</h2>
<div class="transp">
<input type="checkbox" value="Γάλα">Γάλα<br>
<input type="checkbox" value="Γιαούρτι">Γιαούρτι<br>
<input type="checkbox" value="Βούτυρο">Βούτυρο<br>
<input type="checkbox" value="Ρεγκάτο">Ρεγκάτο<br>
<input type="checkbox" value="Κρέμα γάλακτος">Κρέμα γάλακτος<br>
<input type="checkbox" value="Τζατζίκι">Τζατζίκι<br>
<input type="checkbox" value="Τυροκαφτερή">Τυροκαφτερή<br>
<input type="checkbox" value="Αυγά">Αυγά<br>
</div>
</div>
</div>
<div class="thalassina">
<h2 class="epik">Θαλασσινά</h2>
<div class="transp">
<input type="checkbox" value="Γαρίδες">Γαρίδες<br>
<input type="checkbox" value="Μύδια">Μύδια<br>
<input type="checkbox" value="Καλαμάρι">Καλαμάρι<br>
<input type="checkbox" value="Θαλασσινά">Θαλασσινά<br>
<input type="checkbox" value="Αθερίνα">Αθερίνα<br>
</div>
</div>
</form>
You are referencing everything you need in question:
document.psonia.elements
is an HTMLFormControlsCollection, and like all collections, it is array-like with a length property.
document.psonia.elements.length
Update
I have no idea what you are asking. I cut-and-pasted your form into my editor and used my search function to look for the number of input elements you have. My editor found 35.
console.log(document.psonia.elements.length);
also returns 35.
Try something like
var allElements = document.getElementsByTagName('*');
for (var i=0;i<allElements.length;i++){
//console.log(allElements[i].id)
}
i moved the counter of the elements inside the function and now it works.Thank you!
function ektipwsi() {
var numOfEl = document.psonia.elements.length;
for(var i=0; i < numOfEl ; i++){
if(document.psonia.elements[i].checked) {
lista.push(document.psonia.elements[i].value);
}
};
I have a form that finds lost and found items.
<input type="radio" name="subcatitemlost" value="subDiv1" />Luggage
<div id="subDiv1" class="desc">
<label>
<input type="radio" name="subluggage" id="truck" value="t" />
</label>Trunk</br>
<label>
<input type="radio" name="subluggage" id="chest" value="chest" />
</label>Chest</br>
<label>
<input type="radio" name="subluggage" id="suitcase" value="suitcase" />
</label>Suitcase</br>
<label>
<input type="radio" name="subluggage" id="duffelbag" value="duffelbag" />
</label>Duffelbag</br>
<label>
<input type="radio" name="subluggage" id="tote" value="tote" />
</label>Tote</br>
</div>
<br />
<input type="radio" name="subcatitemlost" value="subDiv2" />Clothing
<div id="subDiv2" class="desc">
<input type="radio" name="subclothing" id="shirt" value="shirt" />
</label>Shirt</br>
<input type="radio" name="subclothing" id="shoes" value="shoes" />
</label>Shoes</br>
<input type="radio" name="subclothing" id="pants" value="pants" />
</label>Pants</br>
<input type="radio" name="subclothing" id="jacket" value="jacket" />
</label>Jacket</br>
<input type="radio" name="subclothing" id="suit" value="suit" />
</label>Suit</br>
<input type="radio" name="subclothing" id="hat" value="hat" />
</label>Hat</br>
</div>
<br />
The main categories will unselect themselves upon selection of another main category , however , the subcategories will remain selected and I cannot figure how to control that.I am looking for the script that doesn't allow another subcategory to be selected when the correct button is selected.
$(document).ready(function () {
$("div.desc").hide();
$("input[name$='subcatitemlost']").click(function () {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});
Try using this
$(document).ready(function() {
$("div.desc").hide();
$("input[name$='subcatitemlost']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
$("div input:radio").attr('checked', false);
});
});
http://jsfiddle.net/dbtA4/