We Keep Coding

On click check the closest radio button within div

I am trying to style some radio buttons so that when you click the div, it selects the radio button inside the div.
At the moment, when you click the third div in the list for example, it selects the first div's input. These all have the same ID as it's been written in a razor foreach loop.
here is the HTML generated
<div id="world-container" class="d-flex">
<div class="button-styles image-item">
<input class="city-type-radio" id="CityTypeId" name="CityTypeId" type="radio" value="1">
<label for="CityTypeId">Urban</label>
</div>
<div class="button-styles image-item">
<input class="city-type-radio" id="CityTypeId" name="CityTypeId" type="radio" value="2">
<label for="CityTypeId">Countryside</label>
</div>
<div class="button-styles image-item">
<input class="city-type-radio" id="CityTypeId" name="CityTypeId" type="radio" value="3">
<label for="CityTypeId">Coastal</label>
</div>
</div>
This is the jquery I'm trying to use to select the closest radio button inside that div
$(".button-styles").on("click", function () {
$(this).children('#CityTypeId').prop('checked', true);
});
I can't change the way this HTML is written due to the MVC foreach loop.
Any suggestions or advice how to get around this would be great.
Many thanks in advance

An id should be unique throw a document , you did semantic error by duplicating ids ,
for your issue use classes instead : ( you've already predifined class )
$(this).find('input.city-type-radio').prop('checked', true);
See snippet below :
$(".button-styles").on("click", function () {
$(this).find('input.city-type-radio').prop('checked', true);
});
.image-item {
border:1px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="world-container" class="d-flex">
<div class="button-styles image-item">
<input class="city-type-radio" id="cityTypeId1" name="CityTypeId" type="radio" value="1">
<label for="cityTypeId1">Urban</label>
</div>
<div class="button-styles image-item">
<input class="city-type-radio" id="cityTypeId2" name="CityTypeId" type="radio" value="2">
<label for="cityTypeId2">Countryside</label>
</div>
<div class="button-styles image-item">
<input class="city-type-radio" id="cityTypeId3" name="CityTypeId" type="radio" value="3">
<label for="cityTypeId3">Coastal</label>
</div>
</div>

$(this).find('input').prop('checked', true);

ID has to be unique, that's the reason why your code don't work. Try to target input directly.
$(this).children('input').prop('checked', true);

Selecting checked radio button with jQuery when inputs are duplicated

I'm working on a form that has a funky layout and requires me to duplicate one of the radio questions into another location. This is causing some issues with the Javascript I've written.
On page load, I call a method to find the checked radio input and add a class to its parent (for styling reasons) to do this:
checkPillRadioButton("valuemodeheight");
function checkPillRadioButton(name) {
var checked = $('input[name="' + name + '"]:checked')
checked.parent().addClass("selected");
}
This was working, but now the question has been duplicated it only works for the second set of the radio buttons. Is there a way I can modify what I have to work with duplicate input radio names?
Thanks.
As per request, example of markup:
<div class="pillRadioButtons">
<label class="pillRadioButtons-option">
<input type="radio" name="valuemodeheight" value="CM">
<span>CM</span>
</label>
<label class="pillRadioButtons-option">
<input type="radio" name="valuemodeheight" value="CM" checked>
<span>CM</span>
</label>
</div>
Here is also a Plunkr of the issue:
https://plnkr.co/edit/PDJhLtN1ub1SPH3iKXvq?p=preview

Thats is not working because you have passed a different argument altogether to the function 'checkPillRadioButton'
It should be 'valuemodeheight'
checkPillRadioButton("valuemodeweight");

Actually, I didn't get what you are looking for, but here is an answer from me from my understanding of the issue.
checkPillRadioButton("valuemodeheight");
checkPillRadioButton("valuemodewidth");
function checkPillRadioButton(name) {
var checked = $('input[name="' + name + '"]:checked');
checked.parent().addClass("selected");
}
.pillRadioButtons-option.selected {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pillRadioButtons">
<label class="pillRadioButtons-option">
<input type="radio" name="valuemodeheight" value="CM">
<span>CM</span>
</label>
<label class="pillRadioButtons-option">
<input type="radio" name="valuemodeheight" value="Feet" checked>
<span>Feet</span>
</label>
</div>
<br/>
<br/>
<div class="pillRadioButtons">
<label class="pillRadioButtons-option">
<input type="radio" name="valuemodewidth" value="CM">
<span>CM</span>
</label>
<label class="pillRadioButtons-option">
<input type="radio" name="valuemodewidth" value="Feet" checked>
<span>Feet</span>
</label>
</div>

change your css to:
<style type="text/css" media="all">
input[type=radio]:checked + span {
background-color: red;
}
</style>
and add an onchange event to your input

If check box is cheked show/hide div (by searching trough object property)

I'm making one web site, and I'm stuck. I have 6 checkboxes:
<div class="checkbox">
<label>
<input type="checkbox" value="Pizza" id="pizza">
Pizza
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="BBQ" id="bbq">
BBQ
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="Chicken" id="chicken">
Chicken
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="Pasta" id="pasta">
Pasta
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="Chinese" id="chinese">
Chinese
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="Mexican" id="mexican">
Mexican
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="Indian" id="indian">
Indian
</label>
</div>
</div>
<div class="col-xs-7">
<div class = "restaurant" id="Paradiso">
</div>
</div>
<div class="col-xs-7">
<div class = "restaurant" id="Wingsy">
</div>
</div>
And a lot more of restaurant class div's.
So, I want to make: when checkbox are cheked they search trough restaurants and if that restourant have property that is in checkbox, it shows. Otherwise it hides.
Example:
var typeOfKitchen = ['pizza','bbq','chicken','pasta','chinese','mexican','indian'];
var restaurants = new Array();
restaurant = new Object();
restaurant.[name] = "Paradiso";
restaurant.[type] = typeOfKitchen[0];
restaurants.push(restaurant);
restaurant = new Object();
restaurant.[name] = "Wingsy";
restaurant.[type] = typeOfKitchen[2];
restaurants.push(restaurant);
And then I'm stuck with code to take value of checkbox and search trough restaurants and shows only restaurants who have that property, and hide others that dont have.

Firstly, it is good practise to use jsFiddle to show your code.
Look this fiddle: http://jsfiddle.net/EtJ6L/5/
I had restructured your code a bit, added some css and js.
New HTML code:
<div class="checkbox">
<input type="checkbox" value="Pizza" id="pizza" />
<label>Pizza</label>
</div>
<div class="checkbox">
<input type="checkbox" value="BBQ" id="bbq" />
<label>BBQ</label>
</div>
<div class="checkbox">
<input type="checkbox" value="Chicken" id="chicken" />
<label>Chicken</label>
</div>
<div class="checkbox">
<input type="checkbox" value="Pasta" id="pasta" />
<label>Pasta</label>
</div>
<div class="checkbox">
<input type="checkbox" value="Chinese" id="chinese" />
<label>Chinese</label>
</div>
<div class="checkbox">
<input type="checkbox" value="Mexican" id="mexican" />
<label>Mexican</label>
</div>
<div class="checkbox">
<input type="checkbox" value="Indian" id="indian" />
<label>Indian</label>
</div>
<div class="col-xs-7">
<div class="restaurant" id="pizza">Paradiso</div>
</div>
<div class="col-xs-7">
<div class="restaurant" id="bbq">Wingsy</div>
</div>
Added CSS:
.restaurant {
display: none;
}
Added jQuery:
$(":checkbox").change(function () {
var id = $(this).attr('id');
$(".restaurant#" + id).toggle(this.checked);
});
How it works?
Notice, that I changed block with info about restraunts. Now name of restraunt (and other info will be there too) is inner html of div. Also, to achieve what you want you have to connect restraunt blocks with inputs.
Look this block html, for example:
<div class="col-xs-7">
<div class="restaurant" id="bbq">Wingsy</div>
</div>
Firstly, name is inner hmtl. Also, I added type of restraunt into id attribute of this div.
Look this input html (connected with restraunt):
<div class="checkbox">
<input type="checkbox" value="BBQ" id="bbq" />
<label>BBQ</label>
</div>
Firstly, I restrucutred it a bit. Now it is more valid, than was. Also, notice id attribute of this input. So input and divs are connected now.
Divs with restraunt's info are hidden from start. It is achieved by css code display: none.
Now take a look on jQuery code.
$(":checkbox").change(function () {
var id = $(this).attr('id');
$(".restaurant#" + id).toggle(this.checked);
});
We handling change action on all checkbox elements on page. We save id of checkbox was clicked on. After that we toggle .restraunt#xxx element, where xxx is id of this element. Div's and input's are connected, so this approach will work. Toggle displays or hide element. Read here about it.
Hope this will help you.
Note I think better approach is to make ajax request to the server depending on checkbox checked, then cache and output ajax response.
If you have situation, that restraunt can have more then 1 kitchen As I said earlier better way is to use ajax request. You will send some parameters like bbq=true&pizza=true, server will handle this query and will return some response, depending on query. I had written an example for you. Look this fiddle: http://jsfiddle.net/EtJ6L/8/.
On checkbox click ajax request sending to script bob.php, for example. Look, what data is sending with it. On bob.php you will handle this query. Something like $pizza = $_POST['pizza']; if($pizza != "") { // add something to sql query } etc.

CSS -> Having trouble with a very basic CSS layout

I'm new to CSS/Javascript and am having trouble with something that seems like it should be simple. I have a series of radio buttons and corresponding text. I'd like it all to appear as a bullet-point list, but for some reason messing with the properties of one messes up (or supersedes?) the alignment of the other.
Trying to achieve this (text adjacent to button):
How do I style this in CSS?
<form id="form1">​
<input type=​"radio" name=​"choices" class=​"radioButtons" value=​"0" id=​"choice0">​
<div id=​"c0" class=​"choiceText">​text here</div>​
<input type=​"radio" name=​"choices" class=​"radioButtons" value=​"1" id=​"choice1">​
<div id=​"c1" class=​"choiceText">​text here</div>​
<input type=​"radio" name=​"choices" class=​"radioButtons" value=​"2" id=​"choice2">​
<div id=​"c2" class=​"choiceText">​text here</div>​
</form>​

The thing is that the div element, by default, have its display CSS property set to block.
Quoting W3Schools, 'a block element is an element that takes up the full width available, and has a line break before and after it.' you may notice that both <div> and <p> behave like this.
You have a couple options here. You may want to use an element that have its display property already set to inline by default, like span or label. An inline element only takes up as much width as necessary, and does not force line breaks.
You may also set your DIVs to display:inline instead of the standard display:block. But then you'll probably want to break the line after the content; in that case you can use the :after selector marker, adding a line break - like this:
<style>
div.choicetext { display:inline; }
div.choicetext:after { content:"\A"; white-space:pre; }
</style>
<form id="form1">​
<input type=​"radio" name=​"choices" class=​"radioButtons" value=​"0" id=​"choice0">​
<div id=​"c0" class=​"choiceText">​text here</div>​
<input type=​"radio" name=​"choices" class=​"radioButtons" value=​"1" id=​"choice1">​
<div id=​"c1" class=​"choiceText">​text here</div>​
<input type=​"radio" name=​"choices" class=​"radioButtons" value=​"2" id=​"choice2">​
<div id=​"c2" class=​"choiceText">​text here</div>​
</form>​

Very simple, use the <label> tag. Doesn't require extra styling or any CSS tricks to make it work. It just works. Thats what the <label> tag was created for.
Here's the MDN.
Here's the Fiddle
<form id="form1">
<input type="radio" name="choices" class="radioButtons" value="0" id="choice0">
<label id="c0" class="choiceText">text here</label>
<input type="radio" name="choices" class="radioButtons" value="1" id="choice1">
<label id="c1" class="choiceText">text here</label>
<input type="radio" name="choices" class="radioButtons" value="2" id="choice2">
<label id="c2" class="choiceText">text here</label>
</form>

Try this
<form id="form1">
​
<div id=​"c0" class=​"choiceText">​
<input type=​"radio" name=​"choices" class=​"radioButtons" value=​"0" id=​"choice0">
​ text here</div>
​
<div id=​"c1" class=​"choiceText">
<input type=​"radio" name=​"choices" class=​"radioButtons" value=​"1" id=​"choice1">
​ ​text here</div>
​
<div id=​"c2" class=​"choiceText">
<input type=​"radio" name=​"choices" class=​"radioButtons" value=​"2" id=​"choice2">
​ ​text here</div>
​
</form>

Jquery focus not working / scrolling

I m using the following jquery script to pick a span having a class and focus it
<script type="text/javascript">
$(document).ready(function () {
$('span').each(function () {
if ($(this).hasClass('field-validation-error')) {
$(this).focus();
$(this).addClass('hello');
}
});
});
</script>
For some reasons the focus won't scroll to the span with the class 'field-validation-error' though it does add the class hello to the element.
The section of the html where this span element reside is as belwo
<section id="orderreason">
<div class="orderrow backgrounddot">
<ul>
<li class="widenormal">Please tell us the purpose of your request <span class="asterick">*</span><br>
(this information is used for statistical purposes only)</li>
</ul>
<br>
<p>Please tick any that apply:</p>
<div class="checkboxrow">
<input type="checkbox" value="1" name="orderreason"><label>Patient care</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="2" name="orderreason"><label>Health improvement</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="3" name="orderreason"><label>Professional development</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="4" name="orderreason"><label>Personal development</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="5" name="orderreason"><label>Management/service improvement</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="6" name="orderreason"><label>Research</label>
</div>
<p>Other:</p>
<span data-valmsg-replace="true" data-valmsg-for="orderreason" class="field-validation-error">Please choose a reason or enter other text</span>
</div>
</section>

You can focus on non-input elements if you give your HTML a tabindex attribute like so:
<span tabindex="-1"></span>
The -1 value makes it so that the element can't be tabbed by the user, but you can programmatically focus it with el.focus()
Aside
In your implementation, I assume you are creating validation errors. If the validation error occurs next to the input field, why not focus the input field instead of the span? This will have the added benefit of putting the user's cursor where it needs to be to fix the validation issue and deliver an overall better UX.