Got this script that gets the value of a checked radio button and prints it out in another tag. It works perfectly when you click a radio button, but I've realized that I need to have some of the radio buttons checked by default.
How do I change this script so that it will output the values of already checked radio buttons on page load as well?
$("input[type='radio']").click(function(){
var radioValue = $(this).val();
if(radioValue){
$(this).closest('section').find('h2 .value').text(radioValue);
}
});
Fiddle: https://jsfiddle.net/tactics/bykf31e6/4/
You can use the :checked selector to find all the checked :radio elements on load, and the loop over them to set the value of the related .value element. Try this:
$(":radio:checked").each(function() {
$(this).closest('section').find('h2 .value').text(this.value);
});
Example fiddle
Note that you should use the change event for binding to radio and checkbox elements to cater for those who navigate websites using their keyboards. Also, if you remove the check that the radio element has a value (which is redundant as they should always have a value) you can simplify the code:
$("input[type='radio']").change(setText); // when user selects
$(":radio:checked").each(setText); // onload
function setText() {
$(this).closest('section').find('h2 .value').text(this.value);
}
Example fiddle
Related
I've got a chunk of jQuery that works based off html data-* tags to work through checkboxes in a group for a search form.
Click on the 'All' check box and all of the rest of them should become unselected (this works everytime without issue).
Now, if the 'All' is selected and you click a different option then the 'All' should become unselected, this too works as intended.
However if you want to you can unselect the 'All' checkbox which should then default to having the rest of the checkboxes selected so you can unselect your desired results.
If you haven't changed any others so far, this works for the first time but if any other checkbox bar 'All' is selected or if you've already clicked the 'All' button once it fails if you selected then deselect it again.
Any ideas as to what it's upto would be greatly appreciated (I've tried using console to spot what it's not doing but so far it's not giving any clues).
Example below.
html...
<input data-sel-group='group1' id='group1_all'/>
<input data-sel-group='group1' id='group1_1'/>
<input data-sel-group='group1' id='group1_2'/>
/html...
jQuery...
$('input:checkbox').on('click',function(){
var sel = $(this).data('sel-group'),
all = $('#'+sel+'_all'),
chk = all.is(':checked');
if($(this).attr('id')==all.attr('id')){
if(chk){
$('input[data-sel-group="'+sel+'"][id!="'+sel+'_all"]').attr('checked', false);
}else{
$('input[id!="'+sel+'_all"][data-sel-group="'+sel+'"]').attr('checked', true);
}
}else{
all.attr('checked', false);
if($('input[data-sel-group="'+sel+'"]:checked').length<=0){
all.attr('checked', true);
}
}
})
Use .prop() instead of .attr()
$(selector).prop('checked', true/false);
Also go through .prop() vs .attr()
you should use delayed execution while setting checkbox attribute checked.
Please refer this blog
I have a a reasonably quick problem to solve (I think). I have a form online and it validates the required content for the user's data, but has no validation on the first part of the form.
I've been asked however if I can make a radio button REQUIRED depending on whether an input field has been filled in.
The form can be found here:
http://www.elcorteingles.pt/reservas/livros_escolares/form.asp
So if the person start's filling in the input fields on the first line, that the radio buttons in the group become REQUIRED (for either the CDROM ou CADERNO but not both)
You can handle the focusout and blur events for the input:
$(function () {
// Handle every input type text.
// To select specific inputs, give them a common class and change the
// selector accordingly.
$("input[type=text]").on("focusout blur", function () {
// Check for inputs with class radio_btns which are in
// the parent element (li).
// Set their required property.
$(this).parent().find("input.radio_btns")
.prop("required", $(this).val().trim().length > 0);
});
});
Demo
jQuery reference (Tree Traversal)
jQuery reference (.prop())
jQuery reference (.focusout())
jQuery reference (.blur())
This will work. You can include the following JQuery code in the script tag, and also the JQuery cdn link in the head tag.
$(document).ready(function(){
$('#01titulo').focusout(function(){
if ($(this).val() !== "") {
$('[name="01caderno"]').prop('required', true);
} else {
$('[name="01caderno"]').prop('required', false);
}
alert($('[name="01caderno"]').attr('required'));
});
});
Try using the following js code its working:
$(document).ready(function(){
$(".titulo_books").each(function(){
$(this).focus(function(){
var radioChecked=0;
var currElemId = parseInt($(this).attr('id'));
var radioSelecterId = (currElemId>9) ? currElemId : "0"+currElemId;
$("input:radio[name="+radioSelecterId+"caderno]").each(function(){
if(radioChecked==0)
{
radioChecked==1;
$(this).attr("checked","checked");
}
});
});
});
});
I have checked it by executing this from console on your site and it seems to work fine. You can alter this in the way you want. I have checked one of the four available radio button. User can change the input value if required. Or you can also change the default radio button selected through my code.
Using:
function CheckToggle(which){
jQuery(which).each(function() {
jQuery(this).attr('checked', !jQuery(this).attr('checked'));
});
}
On first click, all checkboxes get checked, click it again, and they get unchecked.
Second click, no checkmarks show in the boxes, however, the checked="checked" attribute does appear in the element, and dissapears if clicking the checkall again.
How can I keep them showing the checkmark?
In this situation, .prop() would be used instead of .attr(). But honestly, it'd be even better to not use either:
this.checked = !this.checked;
Use prop instead of attr
function CheckToggle(which){
jQuery(which).each(function() {
jQuery(this).prop('checked', !jQuery(this).attr('checked'));
});
}
This might be similar to getting length of a class. But I am not getting the actual output for toggle class.
So here is the scenario: I have a table in which there is a checkbox in every row. If check all option is selected, all checkbox is marked. Now the problem is that I want to pass flag as true when all checkbox are checked and false when only some checkboxes are checked. Now I use toggling functionality. So I don't know how I get length of 'unchecked' checkboxes rather than 'unchecked checked' checkboxes.(I am using Div's for styling instead of checkboxes. )
Here is the jsfiddle
Script for counting length:
$("#cntCheck").click(function(){
alert($('.isChecked').length); //Counting Checked CheckBox(Working right).
});
$("#cntUncheck").click(function(){
alert($('.checkBox isChecked').length); //Counting Unchecked CheckBox Except CheckAll checkbox(This is not working)
});
If I understand your (very confusing) question correctly, you're asking how to count the elements that do have the checkBox class but don't have the isChecked class. If so, you can use the .not() method:
$(".checkBox").not(".isChecked").length
Or, the :not() selector:
$(".checkBox:not(.isChecked)").length
Regarding your styling:
"I am using Div's for styling instead of checkboxes."
I would strongly recommend against doing this, because users who don't like to (or are physically unable to) use a mouse or other pointing device can't click your pseudo-checkboxes.
See this fiddle - http://jsfiddle.net/Yp56c/3/
$("#cntUncheck").click(function(){
var notChecked = $('.checkBox').not('.isChecked').length;
alert(notChecked); //This is working
});
Hi i have a radio button(StarRating radiobutton using jquery) and a textbox. When i click on the star, i would like the radiobutton value to display to the textbox.
<input id="InsRating1" class="star" type="radio" name="InsRating" value="1" title="Worst"/>
<input id="InsRating2" class="star" type="radio" name="InsRating" value="2" title="Good"/>
I tried put the Onclick() in the but onClick() has never get fired.
Please advice how to get the value from my radiobutton to textbox. Thanks
I tried this below, but the value is "Undefined"
$(document).ready(function() {
$('#InsRating1').click(function() {
alert(this.value)
});
});
-------------Edit----------
I am using g_thom's answer below but come to this problem :
I have 3 set of stars with 3 textboxes. Each rating should show to only 1 textbox.
However whenever any star is clicked, it shows the value to all 3 textboxes instead of just specified one. Please advice. Thanks
<script type="text/javascript">
$(function() {
$('.star-rating').click(function() {
// assign the value of "total stars" to a textbox with an id of ratingText
$('#EvaluationInstructorRatingTextBox').val($('.star-rating-on').length);
});
$('.rating-cancel').click(function() {
// the value is '0' when the cancel button is clicked
$('#EvaluationInstructorRatingTextBox').val('0');
});
$('.star-rating').click(function() {
// assign the value of "total stars" to a textbox with an id of ratingText
$('#EvaluationMaterialRatingTextBox').val($('.star-rating-on').length);
});
$('.rating-cancel').click(function() {
// the value is '0' when the cancel button is clicked
$('#EvaluationMaterialRatingTextBox').val('0');
});
$('.star-rating').click(function() {
// assign the value of "total stars" to a textbox with an id of ratingText
$('#EvaluationValueRatingTextBox').val($('.star-rating-on').length);
});
$('.rating-cancel').click(function() {
// the value is '0' when the cancel button is clicked
$('#EvaluationValueRatingTextBox').val('0');
});
});
Since the inputs are converted to divs (with the 'rated stars' being assigned a different class), I think you'll want to count the number of divs with the .star-rating-on class and assign that value to the input, like this:
$('.star-rating').click(function() {
// assign the value of "total stars" to a textbox with an id of ratingText
$('#ratingText').val($('.star-rating-on').length);
});
Boring looking example - without the actual graphics/animations (just the HTML from the transformed inputs on plugin page - the value will always be 4): http://jsfiddle.net/bhf2d/
EDIT
The code above should work. I think you may be thinking that you need to apply your jQuery to the radio button, but that's not the case, since it is swapped out on page load with a div. Just in case you're not clear, I've added a live example using the code you provided in your question: Click here to see it.
EDIT 2
See an updated version here, matching the additional requirement to set multiple checkboxes. The textboxes have been renamed slightly (InsRatingText0 etc) to facilitate easily adding more items. The name convention InsRatingText[n] is set that way to match the div classes the plugin adds dynamically ('rater-0', 'rater-1', etc)
These <input> elements are not clicked, since they are hidden and replaced by <div> elements. You should use onChange() events instead.
Also, radio button do not use the property value, but checked.
Try something like this
$(function (){
$(".star").click(function(){
$("#textbox1").val($(this).val());
});
});
Basically, it is adding a handler for onclick to the eloement with class ="star" and then copying that value to the textbox.
$(".star").bind('click', function() {
$("#ratingValue").val($(this).text())
});
Seems like getting the val() on the checkbox didn't work, but using text() gives the value. Here is the example working: jsfiddle