How do I get all checkbox value base on different names? - javascript

$('input[name^=tc]').click(function(){
var attr = $(this).attr('name');
$(this).siblings('input[name='+attr+']').prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
1
<input name="tc0" value="Y" type="checkbox">
<input name="tc0" value="N"type="checkbox">
2
<input name="tc1" value="Y" type="checkbox">
<input name="tc1" value="N" type="checkbox">
3
<input name="tc2" value="Y" type="checkbox">
<input name="tc2" value="N" type="checkbox">
How can I get the final value of all checkbox base on their name?
For example, if I check value "Y" for tc0, value "N" for tc1, value "Y" for tc2.
How can I get "YNN" or ["Y", "N" ,"N"] back to me?

first, I going to assume there was a reason why you aren't using RADIO instead of CHECKBOX, since RADIO accomplishes the single check per group without the extra Jquery on click.
//changed CLICK to CHANGE
$('input[name^=tc]').change(function(){
var attr = $(this).attr('name');
$(this).siblings('input[name='+attr+']').prop('checked', false);
});
//get ids
vals = "";
$("input[type=checkbox]:checked").each(function(){
vals += $(this).val();
});
console.log(vals);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input checked name="tc0" value="Y" type="checkbox">
<input name="tc0" value="N"type="checkbox">
<input checked name="tc1" value="Y" type="checkbox">
<input name="tc1" value="N" type="checkbox">
<input checked name="tc2" value="Y" type="checkbox">
<input name="tc2" value="N" type="checkbox">

The logic demands using radio buttons instead of checkboxes. Here is a solution using radio buttons
$('#getResult').on('click', getResult);
function getResult(){
var result=[];
$('input[name^=tc]:checked').each(function(){
result.push($(this).val());
});
alert(result.toString());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
1<br>
<input name="tc0" value="Y" type="radio">Yes <br>
<input name="tc0" value="N"type="radio">No<br>
2<br>
<input name="tc1" value="Y" type="radio">Yes <br>
<input name="tc1" value="N" type="radio">No<br>
3<br>
<input name="tc2" value="Y" type="radio">Yes <br>
<input name="tc2" value="N" type="radio">No<br>
<button id="getResult">Get Result</button>

Related

Push and pop data from array based on checkbox check and uncheck value using jQuery

var listvalues = []
$('.check').on('change', function() {
var val = this.checked ? this.value : '';
listvalues.push(val)
$('#show').html(listvalues);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<input type="checkbox" class="check" value="1" />1
<input type="checkbox" class="check" value="2" />2
<input type="checkbox" class="check" value="3" />3
<input type="checkbox" class="check" value="4" />4
<div id="show"> </div>
I have a code which should push and pop checkbox value based on checkbox check and uncheck, for example if I check and checkbox it should show the value in a div and if I unselect the checkbox the value should disappear from div, and it should not allow anyone to append duplicate data.
But what I did appends even if it is duplicate it appends the data. Can anyone help me on this?
and i wanted to create separate div for each checkbox
Instead of push & pop value from array, you can get all checked values with listvalues = $('.check:checked').toArray().map(x => x.value); and display it.
$('.check:checked') will only return .check which are checked. Then .toArray() will convert jquery object into array & get use .map(x => x.value) to fetch only value from checked elements.
var listvalues = []
$('.check').on('change', function() {
listvalues = $('.check:checked').toArray().map(x => x.value).join(', ');
$('#show').html(listvalues);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<input type="checkbox" class="check" value="1" />1
<input type="checkbox" class="check" value="2" />2
<input type="checkbox" class="check" value="3" />3
<input type="checkbox" class="check" value="4" />4
<div id="show"> </div>
To remove you can use filter to exclude the unchecked item. I'm not sure what you want to achieve with different divs, please explain.
var listvalues = []
$('.check').on('change', function() {
if(this.checked){
listvalues.push(this.value);
}
else {
listvalues = listvalues.filter(item => item != this.value);
}
$('#show').html(listvalues.sort());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<input type="checkbox" class="check" value="1" />1
<input type="checkbox" class="check" value="2" />2
<input type="checkbox" class="check" value="3" />3
<input type="checkbox" class="check" value="4" />4
<div id="show"> </div>

jQuery Selectors or 'if' trouble

This code should prohibit clicking more than two radiobuttons in total (there are three groups of such buttons).
This works when there is no container 'label', but when it is, it doesn't work (it looks like that 'if' construct is not working; everything that is written outside of it works fine)
how to make it work without removing the label? Is there any solutions?
var radio_limit = 2;
$('.pricing-levels-3 label input').on('change', function(evt) {
if($(this).siblings(':checked').length >= radio_limit) {
this.checked = false;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pricing-levels-3">
<p><strong>Select 2 Levels</strong></p>
<label>
<input type="radio" name="vehicle" value="1">Level 1<br>
<input type="radio" name="vehicle" value="2">Level 2<br>
<input type="radio" name="vehicle" value="3">Level 3<br>
</label>
<label>
<br>
<input type="radio" name="vehicle2" value="1">Level 1<br>
<input type="radio" name="vehicle2" value="2">Level 2<br>
<input type="radio" name="vehicle2" value="3">Level 3<br>
</label>
<label>
<br>
<input type="radio" name="vehicle3" value="1">Level 1<br>
<input type="radio" name="vehicle3" value="2">Level 2<br>
<input type="radio" name="vehicle3" value="3">Level 3<br>
<br>
</label>
</div>
You are looking for siblings, which they were without labels. Now with labels they are not sibling they are cousins. To fix we read all radio buttons in same div using closest(). Also use prop to check a radio button. Do this:
var radio_limit = 2;
$('.pricing-levels-3 label input').on('change', function(evt) {
if($(this).closest('div').find('input:checked').length >= radio_limit) {
$(this).prop('checked', false);
};
});

jQuery find input where radio is checked

$().ready(function () {
$(".div").find("input").each(function (index) {
if($(this).attr("checked")==true){
console.log("You have checked the"+index);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<input name="1" type="radio" >
<input name="1" type="radio" checked="checked" >
<input name="1" type="radio" >
<input name="1" type="radio" >
</div>
Why I cannot use "find" and "each" function to justify which the radio is checked?
The attribute value is 'checked', not true:
if ($(this).attr("checked") == 'checked') {
console.log("You have checked the " + index);
}
Also note that you can make the index retrieval a one-liner using the :checked selector:
$(document).ready(function() {
var index = $(".div").find("input:checked").index();
console.log("You have checked the " + index);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<input name="1" type="radio">
<input name="1" type="radio" checked="checked">
<input name="1" type="radio">
<input name="1" type="radio">
</div>
console.log("You have checked the " + $("input[name=1]:checked").index());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<input name="1" type="radio">
<input name="1" type="radio" checked="checked">
<input name="1" type="radio">
<input name="1" type="radio">
</div>
No need to use .each() use selector :checked
Description: Matches all elements that are checked or selected.
The problem is whenever you perform $(this).attr("checked") it does NOT returns true, instead, it returns checked for the radio's that are checked and undefined for those which aren't checked.
$().ready(function () {
$("div").find("input").each(function (index) {
if($(this).attr("checked")=="checked"){
console.log("You have checked the "+index);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<input name="1" type="radio" >
<input name="1" type="radio" checked="checked" >
<input name="1" type="radio" >
<input name="1" type="radio" >
</div>
You can find below fiddle.
$('#myForm input').on('change', function() {
alert($('input[name=radioName]:checked', '#myForm').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radioName" value="1" /> 1 <br />
<input type="radio" name="radioName" value="2" /> 2 <br />
<input type="radio" name="radioName" value="3" /> 3 <br />
</form>
You may use the following code to find the value of the selected radio button:
HTML
<table>
<tr>
<td><input type="radio" name="q12_3" value="1">1</td>
<td><input type="radio" name="q12_3" value="2">2</td>
<td><input type="radio" name="q12_3" value="3">3</td>
<td><input type="radio" name="q12_3" value="4">4</td>
<td><input type="radio" name="q12_3" value="5">5</td>
</tr>
</table>
JQUERY
$(function(){
$("input[type=radio]").click(function(){
alert($('input[name=q12_3]:checked').val());
});
});
FIDDLE

How do I grab the selected radiobox value from a particular form?

I have some generated HTML along the lines of this.
<form id="form_56">
<input type="radio" name="option" value="0">
<input type="radio" name="option" value="1">
<input type="radio" name="option" value="2">
<input type="radio" name="option" value="3">
<input type="radio" name="option" value="4">
<input type="radio" name="option" value="5">
<input type="radio" name="option" value="6">
</form>
The form id can be anything, but I want to take a form ID and return the selected value from 0 to 6.
I tried following the questions here, but they didn't seem to translate easily to a specific form.
$('#form_56:radio[name=option]:checked').val();
I'm able to use the selector to grab the proper form, but everything I've attempted to get the selected value has returned undefined.
Thanks for your time.
First, you need to change the colon to a space or " > ".
Second you need to change radio to input.
$('#form_56 input[name=option]:checked').val();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form_56">
<input type="radio" name="option" value="0">
<input type="radio" name="option" value="1">
<input type="radio" name="option" value="2">
<input type="radio" name="option" value="3">
<input type="radio" name="option" value="4">
<input type="radio" name="option" value="5">
<input type="radio" name="option" value="6">
</form>
<a href="javascript:console.log($('#form_56 input[name=option]:checked').val());">
<button>Test</button>
</a>
$("#form_56 input:radio[name='option']").val()
You need an event for listening when it changes
see example
$(function() {
$("#form_56 input:radio[name='option']").click(function() {
var val = $(this).val();
alert(val);
});
});
https://jsfiddle.net/rodrigo/cp8rd7h0/
problem in your code: on change event not assign to radio button so undefined alert popup
here is solution:
$(document).ready(function () {
$('input[type=radio]').on('change', function () {
alert($('input[name=option]:checked', '#form_56').val());
});
});
For any form:
$('form>input[type="radio"]:checked').val()
With id:
$('#form_56>input[type="radio"]:checked').val()
It will return selected value or undefined, if no value selected.
Good luck!
function getSelectedValue()
{
return $('form>input[type="radio"]:checked').val();
}
$(function() {
$('button').on(
'click',
function() {
console.log(getSelectedValue() + ' selected');
}
);
});
form {display: inline}
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<form id="randomId-839054763">
<input type="radio" name="option" value="0">
<input type="radio" name="option" value="1">
<input type="radio" name="option" value="2">
<input type="radio" name="option" value="3">
<input type="radio" name="option" value="4">
<input type="radio" name="option" value="5">
<input type="radio" name="option" value="6">
</form>
<button>Log value</button>

JavaScript radio buttons

I have a few radio buttons, and when I select one of them, I also have to check another one.
For example, if I select yes on a radio button, another radio button must be automatically checked with no.
I tried a few scripts but don't seem to work.
Does anyone know a solution? I'm new in JS.
Thanks in advance!
             > Live Demo <              
<!--HTML-->
<input type="radio" name="group_1" value="yes" id="r1">Yes<br>
<input type="radio" name="group_1" value="no" id="r2">No<br>
<br>
<input type="radio" name="group_2" value="yes" id="r3">Yes<br>
<input type="radio" name="group_2" value="no" id="r4">No<br>​
//Script
$("input[name='group_1']").click(function(){
if(this.value=="yes"){
$("input#r4").attr("checked",true);
}else{
$("input#r3").attr("checked",true);
}
});
$("input[name='group_2']").click(function(){
if(this.value=="yes"){
$("input#r2").attr("checked",true);
}else{
$("input#r1").attr("checked",true);
}
});​
I'm not very certain on what you are trying to achieve but by using the "name" attribute this automatically happens...when you check one radio...the others with the same name get set to unchecked.
<input type="radio" name="someoption" value="0" />0
<input type="radio" name="someoption" value="1" />1
<input type="radio" name="someoption" value="2" />2
checking any one of the above will cause the other 2 to be unchecked
unless do you may be mean checkboxes or multiple option sets ?
javascript:
$('#myradio1').bind('change', function () {
$('#myradio3').attr('checked', 'checked');
});
html
<input type="radio" name="cols1" value="1" id="myradio1" />
<input type="radio" name="cols1" value="2" id="myradio2" />
<input type="radio" name="cols2" value="1" id="myradio3" />
<input type="radio" name="cols2" value="2" id="myradio4" />
see working example at http://jsfiddle.net/9jXbv/
For HTML markup like below:
<div>
<input type="radio" name="one" value="yes"> yes
<input type="radio" name="one" value="no"> no
</div>
<div>
<input type="radio" name="two" value="yes"> yes
<input type="radio" name="two" value="no"> no
</div>
you can use this JavaScript code:
$(":radio").on("change", function() {
var that = this;
$(":radio").filter(function() {
return this.value == "no" && this.name != that.name;
}).prop("checked", true);
});​
DEMO: http://jsfiddle.net/nKLMX/
With jquery:
​$("#radio1").change(function() {
$("#radio2").removeAttr("checked");
});​​​
http://jsfiddle.net/
I've mocked up a pure JS solution to this ( No libraries )
<input type="radio" name="g1" value="1" />Yes
<br />
<input type="radio" name="g1" value="0" />No
<br /><br />
<input type="radio" name="g2" value="1" />Yes
<br />
<input type="radio" name="g2" value="0" />No
<script type="text/javascript">
var g1 = document.getElementsByName('g1'); // store g1 elements
var g2 = document.getElementsByName('g2'); // store g2 elements
// handle click functionality
function radio_checked_event(obj, f) {
if(obj.addEventListener) {
obj.addEventListener('click', f, false);
} else if(obj.attachEvent) {
obj.attachEvent('onclick', f);
}
}
// when you click on g1 yes
radio_checked_event(g1[0], function() {
//set g1 no to checked
g2[1].setAttribute('checked', 'checked');
});
</script>

Categories

Resources