My problem is fairly simple. I'm using a template to do styling. The way the template handles form inputs is it wraps them in span tags. To select the radio button, you have to change the class of the span to "checked". Using checked="checked" or checked in the input does not work.
Example:
<label class="radio">
<div class="radio" id="uniformed-undefined">
<span class="checked">
<input type="radio" name="grow" value="slash">
</span>
</div>
How can I target that <span class="checked"> based on the input name "grow" and the value "slash" ?
I've looked into .before() but I'm not sure that's the correct answer.
jQuery multiple attribute selector
and jQuery parent
$("input[name='grow'][value='slash']").parent("span");
$("span.checked:has(input[name='grow'][value='slash'])")
JS Fiddle: http://jsfiddle.net/RgN7H/1
Related
if I move text three before the input tag the checkbox is not disappearing when I click the third time.
but when I keep text three after input tag it works fine.
can you tell me how to fix it.
providing my code below
https://stackblitz.com/edit/angular-w6tqvn?file=app/app.component.html
<label [ngClass]="{'is-multiple-of-3':multipleOf3}">
<span id="redSquare"></span>
three
<input type="checkbox" name="rememberLogin" id="buttonId" (click)="open()">
</label>
It is not like it does not work when you keep text before input box. It is because in first case you are providing class to label while in other you are providing it to span. so just provide [ngClass] to label
<label [ngClass]="{'is-multiple-of-4':multipleOf4}">
<span id="redSquare4"></span>
<input type="checkbox" id="39" name="DownlinkSource" (click)="downlinkCheckBoxClick()"/>
4
</label>
If what you mean by disappearing is showing the redSquare,
you should move span after the text "three".
<label [ngClass]="{'is-multiple-of-3':multipleOf3}">
three<span id="redSquare"></span>
<input type="checkbox" name="rememberLogin" id="buttonId"
(click)="open()">
</label>
In jquery mobile, I want to change a radio group with javascript code. I have this:
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Co-op Department:</legend>
<input name="coopdepartment" id="artssciRB" value="Arts & Science" checked="checked" type="radio">
<label for="artssciRB">Arts & Science</label>
<input name="coopdepartment" id="managementRB" value="Management" type="radio">
<label for="managementRB">Management</label>
<input name="coopdepartment" id="idsRB" value="IDS" type="radio">
<label for="idsRB">IDS</label>
</fieldset>
JS
var all = $("#profile-edit-form").find("input");
all.removeAttr("checked");
$("#profile-edit-form").find("input[value="+user['department_name']+"]").attr( "checked", "checked" );
all.checkboxradio( "refresh" );
but its not working... Does anyone know what is wrong? It is putting a checked attribute on the input tag though.
Thanks
.attr() refers to the HTML attribute in the actual markup. What you want to work with is not the HTML attribute but the DOM property of the element. You want .prop('checked') for this rather than .attr('checked').
Current checkbox state is not its attr, it's a prop.
all.prop("checked", false);
should work.
I have the view below. What I want is to change the class of the div based on whether or not the radio button inside it is checked. What am I doing wrong? Note: I'm a newbie to AngularJS and this project is me trying to learn Angular..
<div class="col-use-select" ng-repeat="show in shows" ng-class="{show[name]:'test'}[tvshow.chosen]">
<input id="{{show.name}}" type="radio" name="checkbox" ng-model="tvshow.chosen" ng-value="show.name">
<label for="{{show.name}}">{{show.name}}</label>
</div>
You are applying ng-class to div of ng-repeat hence it is assigned to all div's. You need to create a child div, add ng-class to that div with your condition. it will toggle the class of only that child div
<div class="col-use-select" ng-repeat="show in shows">
<div ng-class="test:tvshow.chosen">
<input id="{{show.name}}" type="radio" name="checkbox" ng-model="tvshow.chosen" ng-value="show.name">
<label for="{{show.name}}">{{show.name}}</label>
</div>
</div>
What I got from the question is that you want to change the class on a particular radio button selection. The html markup that you have shown is not a valid one when assigning a class on conditional basis in angular.
Please find one below which will change the css class of the div on selection of option and then choose another class on the basis of alternate selection
<div ng-app ng-controller="test">
<div class="col-use-select" ng-repeat="show in shows" ng-class="{test:tvshowChosen=='abc',test2:tvshowChosen=='def'}">
<input id="{{show.name}}" type="radio" name="checkbox" ng-model="$parent.tvshowChosen" ng-value="show.name">
<label for="{{show.name}}">{{show.name}}</label>
</div>
</div>
In this example the line:
ng-class="{test:tvshowChosen=='abc',test2:tvshowChosen=='def'}"
Signifies that if tvshowChosen value is abc then test class will be applied or in the second case test2 will be applied.
This line:
ng-model="$parent.tvshowChosen"
Over here $parent is used as ng-repeat creates its own isolated scope. So $parent will target the parent scope and not individual isolated scopes so that the selection can be a valid one.
Working Fiddle
I am using Check-box model as seen here http://vitalets.github.io/checklist-model/ for check boxes with Angularjs. Some of the Check-boxes need the last check-box element to uncheck all the others. How would I add a ngClick attribute to the last element in a set of Checkboxes using the check-box-model module.
Try Below Solution:
Working Demo
<label ng-repeat="role in roles">
<input ng-click="$last&&mytest()" type="checkbox" checklist-model="user.roles" checklist-value="role.id"> {{role.text}}
</label>
Click on last check box "admin" and it will be alert box
Well I don't know much about checklist-model but you can add ngClick to the last element like this:
<label ng-click={{$last && yourFunction || ''}} ng-repeat="role in roles">
<input type="checkbox" checklist-model="user.roles" checklist-value="role"> {{role}}
</label>
Though, It will add ng-click attribute to all elements but this can work for you. Its an alternative.
I am having html like this:
<form>
<div class="row">
<input type="radio" class="radio">
<label>Text</label>
<input type="radio" class="radio">
<label>Type</label>
</div>
</form>
Now I need to apply a class to each label immediate after each <input type="radio">.
I am using jquery like this:
if($('input').hasClass('radio')){
$(this).next().addClass('radio-url');
}
I am trying to add class 'radio-url' to each <label> immediately after radio tag.
What mistake have I did in this?
You can use .siblings()
$('input[type="radio"]').siblings('label').addClass('radio-url');
DEMO
Or
$('input[type="radio"]').next('label').addClass('radio-url');
DEMO2
You can use next() function
$("input:radio").next('label').addClass("radio-url");`
Try:
$(':radio').next().addClass('radio-url');
jsFiddle example (I threw a text input in there so you can see that it works on only radio inputs)
This answer doesn't directly answer your question!
I believe that your label should have the for attribute so that the label is associated with the radio button. This allows the user:
To check the radio button by clicking the label!
If the input type is text, clicking the label focuses the text input
For accessibility reasons
HTML
<div class="row">
<input type="radio" class="radio" id="text"></input>
<label for="text">Text</label>
<input type="radio" class="radio" id="type"></input>
<label for="type">Type</label>
</div>
JQuery
Search the label using the radio element's ID.
$('input[type="radio"]').each(function(){
var radioId = $(this).attr("id");
$("label[for='" + radioId + "']").addClass('radio-url');
});
Fiddle: http://jsfiddle.net/78zAB/
DEMO
$('input.radio').each(function () {
$(this).next().addClass('radio-url');
})
Use CSS element+element selector:
$('input:radio + label').addClass('theClass')
http://jsfiddle.net/ttnUU/
Works optimal
$('input[type=radio]').next('label').addClass('radio-url');
http://jsfiddle.net/q76FJ/
You need to loop through all radio buttons:
$('input[type="radio"]').each(function(){
$(this).next().addClass('radio-url');
});
Or
$("input[type='radio'] + label").addClass('radio-url')
Fiddle Example
Example 2
Posting this as an answer as all of the others are using the incorrect selector, or don't specify the label in next():
$('input.radio').next('label').addClass('radio-url');
.. which will add the class radio-url to all label elements which come immediately after an input with the class radio