We Keep Coding

check the radio button when click on the li using javascript

I have radio button
Html code:
<input type="radio" class="first" name="bright" checked>
<input type="radio" class="second" name="bright" >
<input type="radio" class="third" name="bright">
<input type="radio" class="four" name="bright">
And i have a nav bar
Html code
<ul class="nav">
<li class="st st1 active" data-cont="first">
<h2 class="inner">وزارة الاستثمار</h2>
</li>
<li class="st st2" data-cont="second">
<h2 class="inner">وزارة التجارة</h2>
</li>
<li class="st st3" data-cont="third">
<h2 class="inner">جهات حكومية اخرى</h2>
</li>
<li class="st st4" data-cont="four">
<h2 class="inner">مكتب هندسي</h2>
</li>
</ul>
These 2 are conected with the data-cont that have the class of the radio button
I want when i click on the li the correct radio button be checked using javascript
I tried to make it using this code in JavaScript
let radio = document.querySelectorAll("input");
let radioArray = Array.from(radio);
let tabs = document.querySelectorAll(".nav li");
let tabsArray = Array.from(tabs);
tabsArray.forEach((ele) => {
ele.addEventListener("click", function (e) {
tabsArray.forEach((ele) => {
ele.classList.remove("active");
});
e.currentTarget.classList.add("active");
document.querySelector(e.currentTarget.dataset.cont).checked = true;
});
});
I try to remove the active class from li and put it on the li where i click then i want the radio button be checked
Any body can help me on this?

the last querySelector is where your code is failing you're not referencing the class for your input it needs to be document.querySelector('.' + e.currentTarget.dataset.cont).checked = true; note the "." prefix
Although that answers your question there is probably more value in pointing out that by changing your html markup to be a little more accessible you can eliminate the need for all of the javascript in your example
e.g.
input:checked + label {
color:Red;
}
<div><input type="radio" id="first" name="bright" checked>
<label for='first'>وزارة الاستثما</label>
</div>
<div>
<input type="radio" id="second" name="bright" >
<label for='second'>وزارة التجارة</label>
</div>
<div>
<input type="radio" id="third" name="bright">
<label for='third'>جهات حكومية اخرى</label>
</div>
<div>
<input type="radio" id="four" name="bright">
<label for='four'>مكتب هندسي</label>
</div>
The use of labels associated with your radio buttons is now significantly more accessible and you can drastically reduce a lot of your markup ( though to be accessible you would need to provide a more meaningful name for for attribute.

How to select 1st item in selenium using document.querySelector

Trying to identify the Active check box[Not the Active text]. I tried the following 2 items[which did not work]:
//div[#class='b-hide-xs']//input[#id='active-filter']/following-sibling::i
(//span[text()='Status']/../..//div[#class='b-ml-large']//span[text()='Active'])[2]
Active
I noticed this 1 worked: div.b-hide-xs i.b-custom
Problem: this selects 3 items Active, Expired and Inactive. Is there anything like array that can be used so that I can select any one of those 3, for example (div.b-hide-xs i.b-custom)1
<div class="b-checkbox">
<label for="expired-filter" class="">
<input type="checkbox" id="expired-filter" value="on">
<i class="b-custom"></i>
</label>
</div>
<div class="b-checkbox">
<label for="inactive-filter" class="">
<input type="checkbox" id="inactive-filter" value="on">
<i class="b-custom"></i>
</label>
</div>

You can get the elements in a list and use basic array indexing to access them:
elements = driver.find_elements_by_css_selector("div.b-hide-xs i.b-custom")
elements[0].click()
elements[1].click()
# etc..
Or:
for element in element:
element.click()

Multiple Radio Buttons on select attach div with down arrow as background image

I have list of inputs of type radios, these drop downs provide sort functionality on data set based on select. Initially, the select provides sorting on ascending order. To provide both sorts of sorting (ascending & descending ) , on select of radio would like to display a down arrow image initially & sort data in ascending and then when the user clicks the arrow it will turn as up arrow image and sorts data in descending order. And when the user clicks the other radio the arrow will be removed from previously selected radio and added to current selected radio.
Here is the HTML
<ul>
<li> <input type="radio" id="btn_Value" name="btn_Sort" value="Value" ng-model="sortType" ng-click="sortChartData('Value')" /> Value</li>
<li> <input type="radio" id="btn_ScoreSort" name="btn_Sort" value="Score" ng-Model="sortType" ng-click="sortChartData('Score')" /> Score</li>
<li> <input type="radio" id="btn_Quartile" name="btn_Sort" ng-Model="sortType" ng-click="sortChartData('Quartile')" value="Quartile" /> Quartile</li>
</ul>
I can attach a div next to each li and set property display none in CSS class and down arrow CSS class and remove the display:none property and add jquery event handler on click. Here is the new HTML.
<ul>
<li> <input type="radio" id="btn_Value" name="btn_Sort" value="Value" ng-model="sortType" ng-click="sortChartData('Value')" /> Value<div class="hide ascSort"></div></li>
<li> <input type="radio" id="btn_ScoreSort" name="btn_Sort" value="Score" ng-Model="sortType" ng-click="sortChartData('Score')" /> Score</li>
<li> <input type="radio" id="btn_Quartile" name="btn_Sort" ng-Model="sortType" ng-click="sortChartData('Quartile')" value="Quartile" /> Quartile</li>
</ul>
But, this seems to me as not that efficient way. Can anyone suggest any other approaches ?

Your tags show you are using jQuery. You can simply use the .hide() and .show() methods of a jQuery element. Something like:
$("#sortArrowAsc").show();
$("#sortArrowDesc").hide();
You can start with the display: none style and use these commands to .toggle() as well:
$("#sortArrowAsc").toggle();
$("#sortArrowDesc").toggle();
EDIT:
From this link, you could try a variable like show that you toggle on click:
<div class="yourRadioContainer">
<span class="someUp" ng-show="show"><img src='uparrow.png' /></span>
<span class="someDown" ng-hide="!show"><img src='downarrow.png' /></span>
<span class="trigger" ng-click="show=!show">Radio Asc</span>
<span class="trigger" ng-click="show=!show">Radio Desc</span>
</div>
The two triggers would act the same you are simply toggling from one state to the other.

Figured a solution.
<ul id="sort">
<li> <input type="radio" id="btn_Value" name="btn_Sort" value="Value" ng-model="sortType" ng-click="sortChartData('Value')" /> Value<span id="sortValue" class="descSort" ng-if="valueSortType" ng-click="changeSortType($event)"></span></li>
<li> <input type="radio" id="btn_ScoreSort" name="btn_Sort" value="Score" ng-Model="sortType" ng-click="sortChartData('Score')" /> Score<span id="sortScore" class="descSort" ng-if="scoreSortType" ng-click="changeSortType($event)"></span></li>
<li> <input type="radio" id="btn_Quartile" name="btn_Sort" ng-Model="sortType" ng-click="sortChartData('Quartile')" value="Quartile" /> Quartile<span id="sortQt" class="descSort" ng-if="qtSortType" ng-click="changeSortType($event)"></span></li>
</ul>
In the HTML ng-if="valueSortType" gets updated when ever the user selects the radio to true.
Event Handler:
$scope.changeSortType = function (event) {
var elem = event.target;
var cssClass = elem.getAttribute('class');
if (cssClass.indexOf("ascSort") > -1) {
$(elem).removeClass('ascSort');
$(elem).addClass('descSort');
$scope.sortOrder = "desc";
}
if (cssClass.indexOf("descSort") > -1) {
$(elem).removeClass('descSort');
$(elem).addClass('ascSort');
$scope.sortOrder = "asc";
}
$scope.$watch("sortOder", function () {
$scope.sortChartData($scope.sortType);
});
};

JQuery to switch option order on a form

I have a form that I need to switch the order of the options in. I need to do it conditionally (not every time) after the page has loaded and it makes sense to use jquery for this task.
Here's the HTML as it initially renders:
<ol class="choices-group">
<li class="choice">
<label for="first">
<input id="first" type="radio" value="25.0">$25</input>
</label>
</li>
<li class="choice">
<label for="second">
<input id="second" type="radio" value="50.0">$50</input>
</label>
</li>
<li class="choice">
<label for="third">
<input id="third" type="radio" value="100.0">$100</input>
</label>
</li>
</ol>
I want the jquery to reverse the order of the elements so it looks like this:
<ol class="choices-group">
<li class="choice">
<label for="third">
<input id="third" type="radio" value="100.0">$100</input>
</label>
</li>
<li class="choice">
<label for="second">
<input id="second" type="radio" value="50.0">$50</input>
</label>
</li>
<li class="choice">
<label for="first">
<input id="first" type="radio" value="25.0">$25</input>
</label>
</li>
</ol>
In this example there were three options, but it may be any number between 1 and 7.
Can anyone see a good way to do this?

This should do it:
$(".choices-group").html($(".choice").get().reverse());
See a working example:
http://jsfiddle.net/epignosisx/bX3Kf/

This should be fairly simply. I would use Javascript object to help manage it where the key-part (property name) is the value used to evaluate the condition and the value is the reference to the DOM. Then you just append them back into ol in correct order.
var temp = {};
$.each('ol li', function(k, v){
var $this = $(v);
temp[$this.attr('someAttribute')] = $this;
});
/*some sorting logic and appending them back*/
This way, you can reorder them however you want and not just reversing the order.

I would do an $.each() to get the elements in the ol, reverse the order then use the $.html() to rewrite the ol
Please see the jquery manual here for an example of this.

Using jquery:
$('.choices-group li').each(function(){
$(this).parent().prepend(this);
});​​​​​​
See jsFiddle
But faster would be to use pure javascript method as:
ObjetNode.insertBefore(NewNode,NodePosition);

Undefined variable in array in prototype

I have the following code:
<ul id="litemsd">
<li class="litemd">
<input type="checkbox" id="d1" name="d1" />
<label for="d1">Number One</label>
</li>
<li class="litemd">
<input type="checkbox" id="d2" name="d2" />
<label for="d2">Numer Two</label>
</li>
<li class="litemd">
<input type="checkbox" id="d3" name="d3" />
<label for="d3">Numer Three</label>
</li>
</ul>
And inside the form's submit observe function I try to iterate over the selected checkboxes:
$$('li.litemd').pluck('checked').each(function(s) {
alert(s.next().innerHTML)
});
But whe that code is reached, the following error pops up in firebug:
"s is undefined"
Any hints ?

I think you're confusing the properties which pluck() works on with HTML attributes. It's anyway easier to add the pseudo class of checked as part of the initial selector, like:
$$('li.litemd input:checked').each(function(s) {
alert(s.next().innerHTML);
});
Example

$$('li.litemd').pluck('checked').each(function() {
alert($$(this).next().innerHTML)
});
?

.pluck() returns an array of values (whatever property name you passed in), so it's not filtering your results to the checked ones, it's literally returning a [false, false, false] array.
Instead I think you want this:
$$('li.litemd input').each(function(s) {
if(s.checked) alert(s.next().innerHTML)
});
You can give it a try here, note the addition of input to the selector, since you're cheking on the property of the <input> inside the <li>, not on the <li> itself.