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.

HTML file is not working

I have two version of the same code.
When I added it in the code snippet from this page it's working pretty well. However, for some reason I cannot get it working it working in my computer.
Take a look in my Dropbox version to get some idea. It's the same coding I'm using in both cases. It's supposed to check a parent checkbox if the child checkbox is checked and vice-versa.
Do you guys have some idea why is it happening?
$('input[type=checkbox]').click(function () {
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('ul').children('li').each(function () {
if($('input[type=checkbox]', this).is(':checked')) sibs=true;
})
$(this).parents('ul').prev().prop('checked', sibs);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tree" id="tree">
<li>
<input type="checkbox" name="account_settings" value="yes">Account Settings
<!-- AND SHOULD CHECK HERE -->
<ul>
<li>
<input type="checkbox" name="one" value="one">AS One</li>
<li>
<input type="checkbox" name="two" value="two">AS Two</li>
<li>
<input type="checkbox" name="user_roles" value="user_roles">Users & Roles
<!-- SHOULD CHECK HERE -->
<ul>
<li>
<input type="checkbox" name="user_role" value="add">Add</li>
<li>
<input type="checkbox" name="user_role" value="delete">Delete</li>
<!-- CHECK HERE -->
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="rl_module" value="yes">RL Module</li>
<li>
<input type="checkbox" name="rl_module" value="yes">Accounting
<ul>
<li>
<input type="checkbox" name="vat" value="yes">VAT</li>
<li>
<input type="checkbox" name="bank_account" value="yes">Banking
<ul>
<li>
<input type="checkbox" name="view" value="yes">View</li>
<li>
<input type="checkbox" name="crud" value="yes">CRUD</li>
</ul>
</li>
</ul>
</li>
</ul>

Have you tried putting your script after the body? (You can leave the script tag where it loads the jQuery in the head)
I used your code and just put your script after the body and it worked just fine.I had that issue aswell where the script wouldn't work when placed before the body.Let me know if it worked out for you.

The reason for the above snippet not working is "events not getting attached" to the element. Try opening the debugger tool here in the page and to one in the dropbox, you will find there is no events attached to the Dropbox's element.
You can use on to attach the events to overcome this situation.
$('input[type=checkbox]').on('click',function () {
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('ul').children('li').each(function () {
if($('input[type=checkbox]', this).is(':checked')) sibs=true;
})
$(this).parents('ul').prev().prop('checked', sibs);
});

if checkbox is checked remove class from div on click

Posted a question on about the same project in the morning. After battling it for a while came up with a bit different approach.
Trying to build a filter. And the idea is that a filter checkboxes have matching id's with filtered items classes. So, once a filter item clicked, filtration is applied to item class. Classes (except for inditem) and ids are dynamic
simplified html of it
<div class="itemswrap">
<div class="inditem dynamic1"></div>
<div class="inditem dynamic2"></div>
<div class="inditem dynamic3"></div>
<div class="inditem dynamic2"></div>
</div>
<ul class="subnav">
<li class="lifilter">
<input type="checkbox" class="filtercheck" id="dynamic1" />
<label for="dynamic1">whatever label</label>
</li>
<li class="lifilter">
<input type="checkbox" class="filtercheck" id="dynamic2" />
<label for="dynamic1">whatever label</label>
</li>
<li class="lifilter">
<input type="checkbox" class="filtercheck" id="dynamic3" />
<label for="dynamic1">whatever label</label>
</li>
</ul>
js
$(".lifilter").each(function() {
var filter1 = $(this).find('.filtercheck').attr('id');
if ( $(this).find('.filtercheck').attr('checked') ) {
$(this).find('.filtercheck').click(function(){
$('.' + filter1).removeClass('checkeditem').hide();
});
}
else
{
$(this).find('.filtercheck').click(function(){
$('.inditem').hide();
$('.' + filter1).addClass('checkeditem');
});
}
});
and this one marked as important not to be hidden when extra items are added into filtration
.checkeditem {display:block !important}
Initial filtration works fine. But when I click on checked item the associated div does not hide.

Do you mean something like
var $filters = $('.filtercheck').change(function() {
var $items = $('.inditem').hide();
var filters = $filters.filter(':checked').map(function() {
return '.' + this.id;
}).get();
if (filters.length) {
$items.filter(filters.join()).show();
} else {
$items.show();
}
});
.checkeditem {
display: block !important
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="itemswrap">
<div class="inditem dynamic1">dynamic1</div>
<div class="inditem dynamic2">dynamic2</div>
<div class="inditem dynamic3">dynamic3</div>
<div class="inditem dynamic2">dynamic2</div>
</div>
<ul class="subnav">
<li class="lifilter">
<input type="checkbox" class="filtercheck" id="dynamic1" />
<label for="dynamic1">whatever label</label>
</li>
<li class="lifilter">
<input type="checkbox" class="filtercheck" id="dynamic2" />
<label for="dynamic1">whatever label</label>
</li>
<li class="lifilter">
<input type="checkbox" class="filtercheck" id="dynamic3" />
<label for="dynamic1">whatever label</label>
</li>
</ul>

The problem with the code is that the event handler attaches the second click event on the first successful case. This means that the "click" on the checkbox is being given the "addclass" case, and all subsequent clicks are being handled by that handler instead of the intended one.
Using the same HTML. I created this:
$(document).ready(function() {
$(".filtercheck").click(function(){
$('.inditem').hide();
var filter1 = $(this).attr('id');
$('.' + filter1).toggleClass('checkeditem');
});
});
which I think is the intended behavior? Instead of individually attaching click handlers, I simply attached a single handler to all of them. It would be fairly easy to do something like
$(this).prop()
to determine if the currently clicked on item had was active or not. For this simple example, I opted to just use a class toggle to illustrate the point.

On click of label add class to previous div, just not working

I'm trying to add a class to a div (.checkbox) when clicking on the label that follows from it. It doesn't seem to be working at all though and I don't know why.
Below is the javascript and the basic form layout that I have set up.
JS
$('#filter ul label').click(function() {
if ($(this).prev('.checkbox').hasClass('checked')) {
$(this).prev('.checkbox').removeClass('checked');
} else {
$(this).prev('.checkbox').addClass('checked');
}
});
HTML
<form id="filter">
<div>
Service <span></span>
<ul>
<li>
<div class="checkbox"></div>
<label for="new-build">
<input type="checkbox" name="new-build" id="new-build">
New Build
</label>
</li>
<li>
<div class="checkbox"></div>
<label for="extensions">
<input type="checkbox" name="extensions" id="extensions">
Extensions
</label>
</li>
<li>
<div class="checkbox"></div>
<label for="refurbishments">
<input type="checkbox" name="refurbishments" id="refurbishments">
Refurbishments
</label>
</li>
<li>
<div class="checkbox"></div>
<label for="fit-out">
<input type="checkbox" name="fit-out" id="fit-out">
Fit Out
</label>
</li>
<li>
<div class="checkbox"></div>
<label for="maintenance">
<input type="checkbox" name="maintenance" id="maintenance">
Maintenance
</label>
</li>
<li>
<div class="checkbox"></div>
<label for="design-build">
<input type="checkbox" name="design-build" id="design-build">
Design & Build
</label>
</li>
<li>
<div class="checkbox"></div>
<label for="listed-building">
<input type="checkbox" name="listed-building" id="listed-building">
Fit Out
</label>
</li>
</ul>
</div>
<input type="submit">
</form>
Any help would be greatly appreciated, I'm assuming it is something really simple that I'm missing completely.
Thank you.

Your solution works perfectly fine. Please make sure that you included jQuery and put your javascript in a
$(document).ready(function() {
});
block.
It seems like the click event is not fired when writing the markup like you did. You can bind your function to the change event of the checkbox instead. This should work as expected:
$('#filter input[type=checkbox]').change(function() {
var $div = $(this).parent().prev('.checkbox');
if ($div.hasClass('checked')) {
$div.removeClass('checked');
} else {
$div.addClass('checked');
}
});
Check Fiddle for demo: http://jsfiddle.net/g3v4F/3/

I think you have a problem with the order of code. At the time your JavaScript code is executed the DOM elements are not there because they come after the JS.
Move the JS behind the HTML or use the jQuery(document). ready(function () {...}) construct (recommended).
http://api.jquery.com/ready/

This worked for me:
$('#filter ul label').click(function() {
var $cb = $(this).prev('.checkbox');
$cb.toggleClass('checked', !$cb.hasClass('checked'));
});
Working JSFiddle
JS should be either below your HTML or wrapped in document.ready
$(function(){
// your JS here
});

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);