Show element with attribute - javascript

<input type="radio" name="group2" test="one" value="Water"> Water
<input type="radio" name="group2" test="two" value="Beer"> Beer<br>
<div style="display: none" test="one">aaaaaaa</div>
<div style="display: none" test="two">bbbbbbb</div>
<div style="display: none" test="one">ccccccc</div>
I would like: if i click on radio Water with attribute test="one" then should show me all div with attribute test="one". How can i make it with jQuery?
LIVE: http://jsfiddle.net/hRCXV/

Try this:
$("input[type='radio']").click(function() {
var test = $(this).attr("test");
$("div[test]").hide();
$("div[test='" + test + "']").show();
});
Updated fiddle
Please bear in mind that creating your own attributes as you have here is not valid. If you're using HTML5 you should consider using the data attribute to store whatever information you need associated with each element.

Attach a label to the Water text, and a click handler using the attribute selector:
<label for="option1">
<input type="radio" name="group2" id="option1" test="one" value="Water"> Water
</label>
<script>
$('label').click(function() {
// Logic tells me that you want to only show the test elements whose
// attribute matches the selected radio element; Hide the previous ones:
$('div[test]').hide();
// Get test value:
var test = $('#' + $(this).attr('for') ).attr('test');
$('div[test="' + test + '"]').show();
});
</script>

$('input [value="Water"]').click(function() {
$('[test="one"]').show();
});

jsFiddle: http://jsfiddle.net/hRCXV/1/
$("input[type=radio][value=Water]").click(function()
{
$("[test=one]").show();
});​

I belive this is something that you are looking for?
​$(':radio[name="group2"]')​.click(function(e){
var test = $(this).attr('test');
$('div[test]').hide();
$('div[test='+test+']').show();
});​

try this
jQuery(document).ready(function(){
var yourAttributeName = 'test';
var allDivs = jQuery('div['+yourAttributeName+']');
jQuery('input['+yourAttributeName+']').click(function(){
allDivs.hide().filter('[' + yourAttributeName + '=' + jQuery(this).attr(yourAttributeName) + ']').show();
})
//check the init checked
.filter(':checked')
//and fire click event to filter
.click();
});

Related

Fix JS code: Append multiple values out of checkboxes to url

I found this code that replaced the link text (= "Show") by the checked checkbox values. Now, I am looking for a code that appends/removes the checked/unchecked values to the link url itself.
function calculate() {
var arr = $.map($('input:checkbox:checked'), function(e, i) {
return +e.value;
});
$("[href$='feature=']").text('the checked values are: ' + arr.join(','));
}
calculate();
$('div').delegate('input:checkbox', 'click', calculate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="options[]" value="Teamsport" />
<input type="checkbox" name="options[]" value="Individual sport" />
</div>
<div>Show</div>
Show
Thank you very much for your help, guys!
I would use an .each() loop instead of $.map()...
Also, since you wish to change the href... And that it is used with an attribute selector, I would save the element in a variable before the href changes. And the same for the href "base" value itself. Because on second click, the href will not end in feature=.
So here is a working demo:
function calculate() {
var arr = [];
$('input:checkbox:checked').each(function(i,v) {
arr.push(v.value);
});
// The array in console
console.log(arr);
// Join it has a string
var arr_string = arr.join(",");
// Use the string in the link's text AND the href
link
.text('the checked values are: ' + arr_string)
.attr('href', link_href_base + arr_string);
// The link's href in console
console.log(link.attr("href"));
}
// Variables that won't change
var link = $("[href$='feature=']");
var link_href_base = link.attr("href");
calculate();
$('div').delegate('input:checkbox', 'click', calculate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="options[]" value="Teamsport" />
<input type="checkbox" name="options[]" value="Individual sport" />
</div>
<div>Show</div>

javascript iterating array of objects using checkboxes

I want to show div when checkboxis true and hide div when checkbox is false. For this reason I have created an array of objects, which have property(checkboxes and divs) and value(selectors of checkboxes and divs). But this code doesn't work. Where have I done a mistake?
https://jsfiddle.net/9LzLm9hx/9/
just change .attr("checked") to .is(":checked")
I don't understand why you give this useless piece of code:
<label for="common"></label> <span>Common</span>
Can be made useful this way:
<label for="common"> <span>Common</span></label>
And to solve your issue, rename the id of the checkboxes to match the class of the divs:
<input type="checkbox" id="post-id" />
<input type="checkbox" id="post-activation" />
And the <div>s:
<div class='col-xs-3 post-id'>id</div>
<div class='col-xs-3 post-activation'>active</div>
Then using jQuery:
$(function () {
$("input:checkbox").change(function () {
if (this.checked)
$("." + this.id).show();
else
$("." + this.id).hide();
});
});

jQuery multiple id sets multiple patterns

OK, sure this is really simple, but I'm new to Java / jQuery so all help knowledge is greatly appreciated!
I have three sets of information, but i want each set to behave the same way, when I check a box, I want a certain div to appear, then disappear when the checkbox is unchecked...
Started with this, and it works...
//Set 1 #mod_1 toggles #sec_mod_1..
$('#sec_mod_1').change(function() {
$('#mod_1').toggle(this.checked);
}).change();
//Set 2
$('#sec_mod_2').change(function() {
$('#mod_2').toggle(this.checked);
}).change();
//Set 3
$('#sec_mod_3').change(function() {
$('#mod_3').toggle(this.checked);
}).change();
Now this is a little long winded, and I know there has to be a shorter way... Thinking something like this...
$('[id^="sec_mod_"]').change(function() {
$('[id^="mod_"]').toggle(this.checked);
}).change();
However, I don't know how to make this function for each separate set, was thinking the "this" keyword...?
Like I said all help would be greatly appreciated...
Use a simple class selector:
$('.trigger').change(function() {
var $checkbox = $(this);
var id = $checkbox.attr('id'); // eg. sec_mod_1
var numb = id.substring(id.lastIndexOf('_') + 1); // eg. 1
$('#mod_' + numb).toggle(this.checked); // toggle #mod_1
}).change();
Add trigger as the class to the elements that needs this functionality.
Working jsfiddle
You may use:
$('#mode_' + this.id.replace('sec_mod_', ''), this).toggle(this.checked);
You can use use the same markup with a handler like
$('input[id^="sec_mod_"]').change(function() {
console.log('d')
$('#mode_' + this.id.replace('sec_mod_', '')).toggle(this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="sec_mod_1" type="checkbox" />
<div id="mode_1">1</div>
<input id="sec_mod_2" type="checkbox" />
<div id="mode_2">2</div>
<input id="sec_mod_3" type="checkbox" />
<div id="mode_3">3</div>
Or if you can change the markup
$('.sec_mod').change(function() {
$($(this).data('target')).toggle(this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="sec_mod_1" class="sec_mod" type="checkbox" data-target="#mode_1" />
<div id="mode_1">1</div>
<input id="sec_mod_2" class="sec_mod" type="checkbox" data-target="#mode_2" />
<div id="mode_2">2</div>
<input id="sec_mod_3" class="sec_mod" type="checkbox" data-target="#mode_3" />
<div id="mode_3">3</div>

get label for for a check input radio

I am having a radio element that I want to get the text:
<div class="fleft multiplecolumns">
<div class="rdbUniteWrapper" style="line-height:20px">
<span class="EasilyRadioWrapper EasilyControlWrapper">
<span class="EasilyRadio EasilyChecked"></span>
<input id="rdbUnite_106" name="rdbUnite" type="radio" value="106" class="formElementHidden" checked="checked" style="opacity: 0;">
</span>
<label for="rdbUnite_106" style="font-weight: bold">kg (kilogramme)</label>
</div>
I tried $('input:radio[name=radio]:checked').next().text(); but it' s not the solution...
What am I doing wrong ?
Cheers
input:radio is not the sibling of label element, its parent span is. thus you need to traverse to parent span, then to next sibling element:
$('input:radio[name=radio]:checked').parent().next().text();
I find out the solution
var labelUnite = $('label[for="' + $("input[name='rdbUnite']:checked").attr("id") + '"]').text();
thanks for your helps
try below code
$('input:radio[name=radio]:checked').parent().next().text();
I am having a radio element that I want to get the text
Since the two are nicely related by id = for, you can use an attribute value selector:
// Assuming `this` is a reference to the radio button element
var label = $('label[for="' + this.id + '"]');
Then if you want the text, use .text():
var test = label.text();
Live example:
$("input[type=radio]").on("click", function() {
alert($('label[for="' + this.id + '"]').text());
});
Click a radio button to see its label text:
<div>
<label for="r1">This is for r1</label>
<input type="radio" id="r1">
</div>
<div>
<label for="r2">This is for r2</label>
<input type="radio" id="r2">
</div>
<div>
<label for="r3">This is for r3</label>
<input type="radio" id="r3">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
More generally, a radio button element and its label are related in one of two ways:
Via id = for, as in your example
Via containment, where the label contains the input[type=radio]
If you want to handle the general case, you can do something like this:
// Assuming `this` is the radio button element
var text;
var label = null;
if (this.id) {
label = $('label[for="' + this.id + '"]');
}
if (!label || !label[0]) {
label = $(this).closest('label');
}
text = label && label.text();
Use This :-
var label = $("label[for='"+$('input:radio[name=radio]:checked').attr('id')+"']")

How can I know which radio button is selected via jQuery?

I have two radio buttons and want to post the value of the selected one.
How can I get the value with jQuery?
I can get all of them like this:
$("form :radio")
How do I know which one is selected?
To get the value of the selected radioName item of a form with id myForm:
$('input[name=radioName]:checked', '#myForm').val()
Here's an example:
$('#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">
<fieldset>
<legend>Choose radioName</legend>
<label><input type="radio" name="radioName" value="1" /> 1</label> <br />
<label><input type="radio" name="radioName" value="2" /> 2</label> <br />
<label><input type="radio" name="radioName" value="3" /> 3</label> <br />
</fieldset>
</form>
Use this..
$("#myform input[type='radio']:checked").val();
If you already have a reference to a radio button group, for example:
var myRadio = $("input[name=myRadio]");
Use the filter() function, not find(). (find() is for locating child/descendant elements, whereas filter() searches top-level elements in your selection.)
var checkedValue = myRadio.filter(":checked").val();
Notes: This answer was originally correcting another answer that recommended using find(), which seems to have since been changed. find() could still be useful for the situation where you already had a reference to a container element, but not to the radio buttons, e.g.:
var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();
This should work:
$("input[name='radioName']:checked").val()
Note the "" usaged around the input:checked and not '' like the Peter J's solution
You can use the :checked selector along with the radio selector.
$("form:radio:checked").val();
If you want just the boolean value, i.e. if it's checked or not try this:
$("#Myradio").is(":checked")
Get all radios:
var radios = jQuery("input[type='radio']");
Filter to get the one thats checked
radios.filter(":checked")
Another option is:
$('input[name=radioName]:checked').val()
$("input:radio:checked").val();
In my case I have two radio buttons in one form and I wanted to know the status of each button.
This below worked for me:
// get radio buttons value
console.log( "radio1: " + $('input[id=radio1]:checked', '#toggle-form').val() );
console.log( "radio2: " + $('input[id=radio2]:checked', '#toggle-form').val() );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="toggle-form">
<div id="radio">
<input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Plot single</label>
<input type="radio" id="radio2" name="radio"/><label for="radio2">Plot all</label>
</div>
</form>
Here's how I would write the form and handle the getting of the checked radio.
Using a form called myForm:
<form id='myForm'>
<input type='radio' name='radio1' class='radio1' value='val1' />
<input type='radio' name='radio1' class='radio1' value='val2' />
...
</form>
Get the value from the form:
$('#myForm .radio1:checked').val();
If you're not posting the form, I would simplify it further by using:
<input type='radio' class='radio1' value='val1' />
<input type='radio' class='radio1' value='val2' />
Then getting the checked value becomes:
$('.radio1:checked').val();
Having a class name on the input allows me to easily style the inputs...
try this one.
it worked for me
$('input[type="radio"][name="name"]:checked').val();
In a JSF generated radio button (using <h:selectOneRadio> tag), you can do this:
radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();
where selectOneRadio ID is radiobutton_id and form ID is form_id.
Be sure to use name instead id, as indicated, because jQuery uses this attribute (name is generated automatically by JSF resembling control ID).
Also, check if the user does not select anything.
var radioanswer = 'none';
if ($('input[name=myRadio]:checked').val() != null) {
radioanswer = $('input[name=myRadio]:checked').val();
}
If you have Multiple radio buttons in single form then
var myRadio1 = $('input[name=radioButtonName1]');
var value1 = myRadio1.filter(':checked').val();
var myRadio2 = $('input[name=radioButtonName2]');
var value2 = myRadio2.filter(':checked').val();
This is working for me.
I wrote a jQuery plugin for setting and getting radio-button values. It also respects the "change" event on them.
(function ($) {
function changeRadioButton(element, value) {
var name = $(element).attr("name");
$("[type=radio][name=" + name + "]:checked").removeAttr("checked");
$("[type=radio][name=" + name + "][value=" + value + "]").attr("checked", "checked");
$("[type=radio][name=" + name + "]:checked").change();
}
function getRadioButton(element) {
var name = $(element).attr("name");
return $("[type=radio][name=" + name + "]:checked").attr("value");
}
var originalVal = $.fn.val;
$.fn.val = function(value) {
//is it a radio button? treat it differently.
if($(this).is("[type=radio]")) {
if (typeof value != 'undefined') {
//setter
changeRadioButton(this, value);
return $(this);
} else {
//getter
return getRadioButton(this);
}
} else {
//it wasn't a radio button - let's call the default val function.
if (typeof value != 'undefined') {
return originalVal.call(this, value);
} else {
return originalVal.call(this);
}
}
};
})(jQuery);
Put the code anywhere to enable the addin. Then enjoy! It just overrides the default val function without breaking anything.
You can visit this jsFiddle to try it in action, and see how it works.
Fiddle
$(".Stat").click(function () {
var rdbVal1 = $("input[name$=S]:checked").val();
}
This works fine
$('input[type="radio"][class="className"]:checked').val()
Working Demo
The :checked selector works for checkboxes, radio buttons, and select elements. For select elements only, use the :selected selector.
API for :checked Selector
To get the value of the selected radio that uses a class:
$('.class:checked').val()
I use this simple script
$('input[name="myRadio"]').on('change', function() {
var radioValue = $('input[name="myRadio"]:checked').val();
alert(radioValue);
});
Use this:
value = $('input[name=button-name]:checked').val();
DEMO : https://jsfiddle.net/ipsjolly/xygr065w/
$(function(){
$("#submit").click(function(){
alert($('input:radio:checked').val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Sales Promotion</td>
<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>
<button id="submit">submit</button>
If you only have 1 set of radio buttons on 1 form, the jQuery code is as simple as this:
$( "input:checked" ).val()
I've released a library to help with this. Pulls all possible input values, actually, but also includes which radio button was checked. You can check it out at https://github.com/mazondo/formalizedata
It'll give you a js object of the answers, so a form like:
<form>
<input type="radio" name"favorite-color" value="blue" checked> Blue
<input type="radio" name="favorite-color" value="red"> Red
</form>
will give you:
$("form").formalizeData()
{
"favorite-color" : "blue"
}
JQuery to get all the radio buttons in the form and the checked value.
$.each($("input[type='radio']").filter(":checked"), function () {
console.log("Name:" + this.name);
console.log("Value:" + $(this).val());
});
To retrieve all radio buttons values in JavaScript array use following jQuery code :
var values = jQuery('input:checkbox:checked.group1').map(function () {
return this.value;
}).get();
try it-
var radioVal = $("#myform").find("input[type='radio']:checked").val();
console.log(radioVal);
Another way to get it:
$("#myForm input[type=radio]").on("change",function(){
if(this.checked) {
alert(this.value);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<span><input type="radio" name="q12_3" value="1">1</span><br>
<span><input type="radio" name="q12_3" value="2">2</span>
</form>
From this question, I came up with an alternate way to access the currently selected input when you're within a click event for its respective label. The reason why is because the newly selected input isn't updated until after its label's click event.
TL;DR
$('label').click(function() {
var selected = $('#' + $(this).attr('for')).val();
...
});
$(function() {
// this outright does not work properly as explained above
$('#reported label').click(function() {
var query = $('input[name="filter"]:checked').val();
var time = (new Date()).toString();
$('.query[data-method="click event"]').html(query + ' at ' + time);
});
// this works, but fails to update when same label is clicked consecutively
$('#reported input[name="filter"]').on('change', function() {
var query = $('input[name="filter"]:checked').val();
var time = (new Date()).toString();
$('.query[data-method="change event"]').html(query + ' at ' + time);
});
// here is the solution I came up with
$('#reported label').click(function() {
var query = $('#' + $(this).attr('for')).val();
var time = (new Date()).toString();
$('.query[data-method="click event with this"]').html(query + ' at ' + time);
});
});
input[name="filter"] {
display: none;
}
#reported label {
background-color: #ccc;
padding: 5px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
}
.query {
padding: 5px;
margin: 5px;
}
.query:before {
content: "on " attr(data-method)": ";
}
[data-method="click event"] {
color: red;
}
[data-method="change event"] {
color: #cc0;
}
[data-method="click event with this"] {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
<input type="radio" name="filter" id="question" value="questions" checked="checked">
<label for="question">Questions</label>
<input type="radio" name="filter" id="answer" value="answers">
<label for="answer">Answers</label>
<input type="radio" name="filter" id="comment" value="comments">
<label for="comment">Comments</label>
<input type="radio" name="filter" id="user" value="users">
<label for="user">Users</label>
<input type="radio" name="filter" id="company" value="companies">
<label for="company">Companies</label>
<div class="query" data-method="click event"></div>
<div class="query" data-method="change event"></div>
<div class="query" data-method="click event with this"></div>
</form>
$(function () {
// Someone has clicked one of the radio buttons
var myform= 'form.myform';
$(myform).click(function () {
var radValue= "";
$(this).find('input[type=radio]:checked').each(function () {
radValue= $(this).val();
});
})
});

Categories

Resources