Disclaimer:This is a unique situation and very hackish.
I have one set of radios that are visible to users and another set that is hidden. I need to pull the name from the hidden set and assign to the visible set.
Hidden radios:
<div class="productAttributeValue">
<div class="productOptionViewRadio">
<ul>
<li>
<label>
<input type="radio" class="validation" name="attribute[139]"
value="86" checked="checked" />
<span class="name">Standard Shipping</span>
</label>
</li>
etc etc...more li's
</ul>
</div>
</div>
A visible radio:
<label>
<input type="radio" class="validation" name="PUT OTHER NAME HERE" value="86" checked="checked" />
<span class="name">Standard Shipping</span>
<p class="rl-m"><small>Earliest Date of Delivery:</small>
<small><span id="delivery-date"></span></small></p>
</label>
So, in this case, I would like the name "attribute[139]" to somehow be gotten from the hidden radio and called to the name of the visible radio. I'm thinking of something like this:
<script>
$(function() {
var name = $(".productOptionViewRadio span.name:contains('(Standard)')").attr('name');
});
</script>
I'm not too sure about the script being the right way to go about this and also not sure how I would actually get the value from the one element to populate to the other element's name field.
Thank you very much.
Update: Fiddle http://jsfiddle.net/susan999/XBcaF/
Try
$('label input[type=radio]').attr('name',
$('.productOptionViewRadio input[type=radio]').attr('name'));
http://jsfiddle.net/XBcaF/5/
Try this
$('input:radio.validation:visible').attr('name',function(){
return $('input:radio.validation:hidden').attr('name')
})
Could improve the selectors if know more about parent classes of visible radios, or what elements are actualy being set as hidden
You can try something like this:
var checkboxCount = 0;
$("#visibleCheckboxes").find("input[type=checkbox]").each(function(){
$($("#hiddenCheckboxes").find("input[type=checkbox]").get(checkboxCount)).attr('name', $(this).attr('name'));
checkboxCount++;
});
I've prepared a Fiddle for you: http://jsfiddle.net/MJNeY/1/
Related
I want to add class, next to checked input. So, class will be added to span, which is next to a checked input radio.
<label>
<input type="radio" name="option[228]" value="20" checked="checked">
<span data-toggle="tooltip" data-placement="top" title="" data-original-title="Purple (+₹20)">
<img src="http://countrylivings.com/image/cache/catalog/sample/q2-50x50.png" alt="Purple +₹20" width="36px" height="36px">
</span>
</label>
I have tried a no. of ways to do so... But didn't work. like---
$(document).ready(function(){
if ($('label input').is(':checked')) {
$(this.element).next().addClass('hloo');
alert($(this.element).val());
};
});
But i get an alert of undefined when input is checked.
So,
if ($('label input').is(':checked')) {
is working fine to detect if checkbox is checked But
$(this) or $(this.element)
is not working.
Anyone know what is going wrong?
There's three issues in your code. Firstly ::checked is not a valid jQuery selector, it's just :checked.
Secondly, assuming this is a reference to an Element object (as it is in the vast majority of cases in jQuery) then there is no element property. Just use $(this).
Lastly, if conditions run under the outer scope, so this would refer to the document in your example, not the input. It's for this reason val() is undefined; you're looking at document.value. To fix this, select the element directly before working with it:
$(document).ready(function() {
var $checkedInput = $('label input:checked');
$checkedInput.next().addClass('hloo');
console.log($checkedInput.val());
});
.hloo { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="option[228]" value="20" checked="checked">
<span data-toggle="tooltip" data-placement="top" title="" data-original-title="Purple (+₹20)">
<img src="http://countrylivings.com/image/cache/catalog/sample/q2-50x50.png" alt="Purple +₹20" width="36px" height="36px">
</span>
</label>
Ho i can show clear-field when input is changed
<div class="small-12 columns">
<input type="text" name="job_title" id="resume_title" class="required ui-autocomplete-input" maxlength="128">
<span class="clear-field" style="display: none;"></span>
</div>
I did not understand the relationship between title and your question. Do you have many input boxes with same id i.e. resume_title (which would be wrong), or you have multiple clear-field and you want to display the nearest one on the change in your input box?
By assuming you have just one textbox with the id resume_title and one span with class clear-field:
$(function(){
$("#resume_title").change(function() {
$(".clear-field").css({ display: "block" });
});
});
Hello I have created this checkbox,how can I hide it?
<div class="checkbox">
<label for="sendEmail">
<g:checkBox name="sendEmail" checked="${sendEmail == 'on'}"
onchange="swapFieldsets(this, '#sa-email', '#sa-password')" />
<g:message code="onBoard.noAccessEmail" default="Send Access Email" />
</label>
</div>
You can also do it by javascript. Give your element an ID or hide it by name or class.
document.getElementById("checkbox").style.visibility = "hidden";
document.getElementsByName("checkbox").style.visibility = "hidden";
document.getElementsByClassName("checkbox").style.visibility = "hidden";
If you can use jquery this is also possible:
$('#checkbox').hide();
Take a look at this link for more information
take a look at this example to see what you want to do with your element. Then you can choose between the answers given. :)
in your style.css, add
.checkbox{
display:none;
}
note: this will hide all elements with the class .checkbox, so you might want to change it (or better: give it an id)
or do it inline:
<div class="checkbox" style="display:none;">
<label for="sendEmail">
<g:checkBox name="sendEmail" checked="${sendEmail == 'on'}"
onchange="swapFieldsets(this, '#sa-email', '#sa-password')" />
<g:message code="onBoard.noAccessEmail" default="Send Access Email" />
</label>
</div>
if you want to do it in javascript, it would look like this: (you would have to give the checkbox an id)
document.getElementById("checkboxid").style.display = 'none';
I would like to make a survey on a website with a question and three possible answers.
The problem is that i'm having trouble with the check/uncheck, I want to have only one answer checked, so if the user clicks on an answer and he has already checked an other one, it keeps only the last one.
Here is what I've done :
$("input:checkbox").click(function() {
if($(this).is(':checked')){
var iSurveyId = $(this).closest('div').attr('name');
var iAnswerId = $(this).closest('p').attr('value');
var bIsChecked = 'true';
If the user click on a checkbox, I'll get the survey ID that is in the name of my div and the ID of my answer which is in my paragraph's name.
I'm using jQuery 1.1.12 so I can't use every function for exemple I can't use .prop().
You can use the input type radio instead of checkboxes so that all the user can only select one answer, or clear all the checkboxes first like this
$("input:checkbox").click(function() {
$('input:checkbox').removeAttr('checked');
$(this).attr('checked', 'checked');
}
The above should removed the checked attribute from all the select boxes and assign the checked attribute to the clicked one, or if you have multiple questions, each with multiple answers, you can put the checkboxes in a div and change the code to:
$("input:checkbox").click(function() {
$('#div_id input:checkbox').removeAttr('checked');
$(this).attr('checked', 'checked');
}
Use this simple code
$("input:checkbox").click(function() {
var thisChecked = $(this)[0].checked;
$("input:checkbox").removeAttr('checked');
if (thisChecked)
$(this).attr("checked", true);
else
$(this).attr("checked", false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div>
<input type="checkbox" />
<span>Item 1</span>
</div>
<div>
<input type="checkbox" />
<span>Item 2</span>
</div>
<div>
<input type="checkbox" />
<span>Item 3</span>
</div>
<div>
<input type="checkbox" />
<span>Item 4</span>
</div>
I have a javascript array like so:
$scope.quantityMachines = [
{ 'snippet' : 'One' },
{ 'snippet' : 'Two' },
{ 'snippet' : 'Three or more',
'extraField' : true },
{ 'snippet' : 'Not sure, need advice' }
];
Then I have a list of radio buttons generated by Angular JS using the array:
<ul>
<li ng-repeat="quantity in quantityMachines">
<input type="radio" id="quantityMachines{{$index}}" name="quantityMachines" value="{{quantity.snippet}}" ng-model="howMany" />
<label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
</li>
</ul>
This works. In the array there is an extraField with value true in one of the indexes. I need Angular to show an extra input field when a radio button with the extraField setting is checked. The array may change to have more than one index with the extraField value.
So the extra field would look something like this.
<input type="text" ng-model="extraInfo" ng-show="howMany" />
Other than knowing to use ng-show, I'm not sure what would be the correct way to do this. The above example of course does nothing.
You could use ng-if and ng-show combination and a scope variable to keep track what is selected. ng-if will make sure the textbox is not added unwantedly to the DOM and ng-show to show and hide as the radio gets toggled.
In your input:-
<input type="text" ng-model="extraInfo" ng-if="quantity.extraField" ng-show="option.selected === howMany" />
and in your Radio add ng-click="option.selected=quantity.snippet"
<ul>
<li ng-repeat="quantity in quantityMachines">
<input type="radio" id="quantityMachines{{$index}}" name="quantityMachines" value="{{quantity.snippet}}" ng-model="howMany" ng-click="option.selected=quantity.snippet"/>
<label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
<input type="text" ng-model="extraInfo" ng-if="quantity.extraField" ng-show="option.selected === howMany" />
</li>
</ul>
and add in your controller:-
$scope.option = { selected:'none'};
Bin
You could even use howMany to track what was selected except that you need to set it as a property to an object on the scope (Since ng-repeat creates its own child scope and proto inheritance comes to play).
So in your radio just add ng-model="option.howMany", in your controller add $scope.option = { }; and in the text box ng-if="quantity.extraField" ng-show="quantity.snippet === option.howMany"
Bin
If only you had a plunker...without that try this
<ul>
<li ng-repeat="quantity in quantityMachines">
<input type="radio" id="quantityMachines{{$index}}" name="quantityMachines"
value="{{quantity.snippet}}" ng-model="howMany" />
<label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
<input type="text" ng-model="extraInfo" **ng-if="quantity.extraField"** />
</li>
</ul>
http://jsbin.com/biwah/1/edit?html,js,output
<ul>
<li ng-repeat="quantity in quantityMachines">
<input type="radio" id="quantityMachines{{$index}}" name="quantityMachines" value="{{quantity.snippet}}" ng-model="howMany" />
<label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
<input type="text" ng-model="quantity.extraInfo" ng-show="quantity.extraField" />
</li>
</ul>
The easiest way to show something when radio button is checked is the following:
Lets say you have a radio-group with: ng-model="radio-values"
To show or hide your input then depends on the values within the radio-group: value="radio-value1", value="radio-value2"
To finally show or hide the input field (lets say you want to show something if "radio-value1" is set) you do:
<input ng-show="radio-values == 'radio-value1'" ...>