I would like to have just one checkbox checked at the same time.
I would like to have the value checked.
It works if I remove all div tag but I need to have div tag for the organisation.
So my js code :
$('.myCheckbox').click(function() {
$(this).siblings('input:checkbox').prop('checked', false);
var value = $(this).val();
console.log("value = "+value);
});
And my html code which works without div but not with div :
<div id="id_1" class='class_1'>
<div id="id_a" class='class_a'>
<div>
<img src="fr.png">
<input type="checkbox" class="myCheckbox" value="fr" />
</div>
<div>
<img src="cs.png">
<input type="checkbox" class="myCheckbox" value="cs" />
</div>
<div>
<img src="en.png">
<input type="checkbox" class="myCheckbox" value="en" />
</div>
</div>
<div id="id_b" class='class_b'>
<div>
<img src="bc.png">
<input type="checkbox" class="myCheckbox" value="bc" />
</div>
<div>
<img src="tl.png">
<input type="checkbox" class="myCheckbox" value="tl" />
</div>
<div>
<img src="jk.png">
<input type="checkbox" class="myCheckbox" value="jk" />
</div>
</div>
</div>
$('.myCheckbox').click(function() {
$('.myCheckbox').prop('checked', false);
$(this).prop('checked') ? $(this).prop('checked', false) : $(this).prop('checked', true);
var value = $(this).val();
console.log("value = "+value);
});
You current situation is perfect candidate for use of radios instead, you need to group them by name:
<div id="id_1" class='class_1'>
<div id="id_a" class='class_a'>
<div>
<img src="fr.png">
<input type="radio" name='langa' class="myRadio" value="fr" />
</div>
<div>
<img src="cs.png">
<input type="radio" name='langa' class="myRadio" value="cs" />
</div>
<div>
<img src="en.png">
<input type="radio" name='langa' class="myRadio" value="en" />
</div>
</div>
<div id="id_b" class='class_b'>
<div>
<img src="bc.png">
<input type="radio" name='langb' class="myRadio" value="bc" />
</div>
<div>
<img src="tl.png">
<input type="radio" name='langb' class="myRadio" value="tl" />
</div>
<div>
<img src="jk.png">
<input type="radio" name='langb' class="myRadio" value="jk" />
</div>
</div>
</div>
Then you can use this script:
$('.myRadio').change(function() {
var value = $(this).val(); // this will get you the checked radio value.
console.log("value = "+value);
});
Define checkboxes with same name like
<input type="checkbox" class="myCheckbox" value="bc" name="common_name" />
First find the parent siblings then:
$('.myCheckbox').click(function() {
$(this).parent().siblings().find('input:checkbox').prop('checked', false);
});
By definition checkboxes are used when you want to give the option to select multiple options to the user. If you want him to select only one value use radios instead :)
Example -
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
But if this has to be done by checkboxes you can try this :)
<input type = "checkbox" name = "sample" value = "1">firsr
<input type = "checkbox" name = "sample" value = "2">second
<input type = "checkbox" name = "sample" value = "3">third
Javascript
$(document).ready(function() {
$('input[name=sample]').click(function(e){
$( "input[name=sample]").prop('checked', false);
$(this).attr('checked','checked')
})
});
Related
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 a foreach loop creating a checkbox for each record from a table in my Db as follows:
#foreach (var item in Model)
{
<input id="#item.extras_id" name="#item.extra_name" type="checkbox" value="#item.rate" />
<span>#item.extra_name</span>
<span style="float: right; padding-right: 16px;">R #item.rate.00</span>
<br />
}
My question is, Is there a way from me to retrieve the ID's of all checked checkboxes?
You can try this
Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(i => (i.id));
using JS I'd do
// add event to the button for the demo
document.getElementById("getChecked").onclick = getChecked;
function getChecked() {
// get all inputs of the page
// use node.getElementsByTagName("input") to get only child of node
inputs = document.getElementsByTagName("input")
checked = []
for (let input of inputs) {
// for each element look if it is checked
if (input.checked) checked.push(input)
}
// here I log because can't return from event but you could return it
console.log(checked)
}
<input id="1" name="a" type="checkbox" value="1" /> <span>a</span>
<br />
<input id="2" name="z" type="checkbox" value="2" /> <span>b</span>
<br />
<input id="3" name="e" type="checkbox" value="3" /> <span>c</span>
<br />
<input id="4" name="r" type="checkbox" value="4" /> <span>d</span>
<br />
<input id="5" name="t" type="checkbox" value="5" /> <span>e</span>
<br />
<button id="getChecked">getChecked()</button>
Edit : I'd prefer Vlad Yaremenko's answer which does the same in a more concise format
How can I use the 'id' to only apply the disabled/enabled button if a check box is clicked to ONLY the second button, as I need it to toggle on and off depending on if a checkbox is clicked or not. Where as the first button will always be on
http://jsfiddle.net/BPhZe/2122/
<h1>Button should be enabled if at least one checkbox is checked</h1>
<form>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="submit" id="sub1" value="Do thing">
</div>
<div>
<input type="checkbox" name="here" id="option-12"> <label for="option-2">Option 3</label>
</div>
<div>
<input type="checkbox" name="now" id="option-22"> <label for="option-2">Option 4</label>
</div>
<div>
<input type="submit" id="sub2" value="Do thing" disabled="true">
</div>
</form>
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
var checkboxes = $("input[type='checkbox']"),
submitButt2 = $("#sub2");
checkboxes.click(function() {
submitButt2.attr("disabled", !checkboxes.is(":checked"));
});
use id of the second submit button instead of input[type='submit'].
var submitButt = $("#sub2");
FIDDLE DEMO
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/
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.