Develop Reference

Is there any way to shorten this code? Currently its working fine

This is my code. is there any other way?
$("._nf-short-ans").on("click", function(){
$(".nf-short-desc").removeClass("nf-hide");
$(".nf-main-c").addClass("nf-hide");
$(".nf-btn-opt").addClass("nf-hide");
$(".nf-para-c").addClass("nf-hide");
$(".nf-date-c").addClass("nf-hide");
$(".nf-time-c").addClass("nf-hide");
$(".nf-other-c").addClass("nf-hide");
});
$("._nf-para").on("click", function(){
$(".nf-para-c").removeClass("nf-hide");
$(".nf-main-c").addClass("nf-hide");
$(".nf-btn-opt").addClass("nf-hide");
$(".nf-short-desc").addClass("nf-hide");
$(".nf-date-c").addClass("nf-hide");
$(".nf-time-c").addClass("nf-hide");
$(".nf-other-c").addClass("nf-hide");
});
$("._nf-date").on("click", function(){
$(".nf-date-c").removeClass("nf-hide");
$(".nf-main-c").addClass("nf-hide");
$(".nf-btn-opt").addClass("nf-hide");
$(".nf-short-desc").addClass("nf-hide");
$(".nf-time-c").addClass("nf-hide");
$(".nf-para-c").addClass("nf-hide");
$(".nf-other-c").addClass("nf-hide");
});
$("._nf-time").on("click", function(){
$(".nf-time-c").removeClass("nf-hide");
$(".nf-main-c").addClass("nf-hide");
$(".nf-btn-opt").addClass("nf-hide");
$(".nf-short-desc").addClass("nf-hide");
$(".nf-para-c").addClass("nf-hide");
$(".nf-date-c").addClass("nf-hide");
$(".nf-other-c").addClass("nf-hide");
});
$("._nf-multi-choice, ._nf-checkbox").on("click", function(){
$(".nf-para-c").addClass("nf-hide");
$(".nf-main-c").removeClass("nf-hide");
$(".nf-other-c").removeClass("nf-hide");
$(".nf-btn-opt").removeClass("nf-hide");
$(".nf-short-desc").addClass("nf-hide");
$(".nf-date-c").addClass("nf-hide");
$(".nf-time-c").addClass("nf-hide");
});
.nf-hide {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row margin-top-10 data-c">
<div class="col col-12 child-centered nf-main-c nf-hide" id="nf_1">
<div class="rdo-wrapper fullwidth" id="opt_1">
<input id="rdo8" type="radio" name="sample4" class="rdo">
<label class="lbl-rdo fullwidth noah-forms-lbl nf-opt-lbl" for="rdo8">
<div class="col col-12">
<div class="nf-opt-c">
<div class="nf-input-opt">
<input type="text" name="" class="txtbox noah-forms-textbox nf-opt" value="Option 1">
<span></span>
</div>
<div class="nf-aImage-c">
<div class="nf-opt-icon _nf-aImage-opt"></div>
</div>
<div class="nf-close-c">
<div class="nf-opt-icon _nf-close-opt"></div>
</div>
</div>
</div>
</label>
</div>
</div>
<div class="col col-12 margin-top-10 nf-short-desc">
<div class="nf-short-desc-c">
<input type="text" name="" class="txtbox noah-forms-textbox" placeholder="Short answer text">
<span></span>
</div>
</div>
<div class="col col-12 margin-top-10 nf-para-c nf-hide">
<div class="nf-para-input">
<input type="text" name="" class="txtbox noah-forms-textbox" placeholder="Long answer text">
<span></span>
</div>
</div>
<div class="col col-12 margin-top-10 nf-date-c nf-hide">
<div class="nf-date-input">
<input type="date" name="" class="txtbox noah-forms-textbox" placeholder="Short answer text">
<span></span>
</div>
</div>
<div class="col col-12 margin-top-10 nf-time-c nf-hide">
<div class="nf-time-input">
<input type="time" name="" class="txtbox noah-forms-textbox" placeholder="Long answer text">
<span></span>
</div>
</div>
</div>
<div class="nf-dropdown">
<div class="nf-select-c">
<div class="nf-default-opt">
<div class="nf-li">
<div class="nf-opt" data-value="nf-multi">
<div class="nf-icon _nf-icon-chk"></div>
<div class="nf-p">Multiple Choice</div>
</div>
</div>
</div>
<div class="nf-opt-ul">
<div class="nf-li">
<div class="nf-opt _nf-short-ans" data-value="nf-short-ans">
<div class="nf-icon _nf-icon-s-ans"></div>
<div class="nf-p">Short Answer</div>
</div>
</div>
<div class="nf-li">
<div class="nf-opt _nf-para" data-value="nf-para">
<div class="nf-icon _nf-icon-para"></div>
<div class="nf-p">Paragraph</div>
</div>
</div>
<hr>
<div class="nf-li">
<div class="nf-opt _nf-multi-choice" data-value="nf-multi">
<div class="nf-icon _nf-icon-mchoice"></div>
<div class="nf-p">Multiple Choice</div>
</div>
</div>
<div class="nf-li">
<div class="nf-opt _nf-checkbox" data-value="nf-check">
<div class="nf-icon _nf-icon-checkbox"></div>
<div class="nf-p">CheckBoxes</div>
</div>
</div>
<hr>
<div class="nf-li">
<div class="nf-opt _nf-date" data-value="nf-date">
<div class="nf-icon _nf-icon-date"></div>
<div class="nf-p">Date</div>
</div>
</div>
<div class="nf-li">
<div class="nf-opt _nf-time" data-value="nf-time">
<div class="nf-icon _nf-icon-time"></div>
<div class="nf-p">Time</div>
</div>
</div>
</div>
</div>
</div>
The code works just fine. However, I'm thinking if there is a way to shorten this kind of jQuery code.

Rather than giving the containers a unique class, such as .nf-date-c, you can give them all a common class, like .nf-container, then use that as the selector. Since you're already storing which container the option relates to in it's data-value, you can use that to select the corresponding container.
<div class="col col-12 margin-top-10 nf-date nf-container">
$('.nf-opt').on('click', function(){
$('.nf-container').addClass('nf-hide'); //hide everything
$('.nf-container.' + this.getAttribute('data-value'))
.removeClass('nf-hide'); //unhide the clicked option
});

If you put the toggleable elements (that get shown or hidden) in order, you can iterate over the clickable .nf-lis and use the clicked index to identify which toggleable section to show, and hide the rest.
Your toggleable sections are already in order except for the .nf-main-c - all you need to do in the HTML is move that to the end so it comes last with the .data-c > div selector.
const toggleableDivs = $('.data-c > div');
$('.nf-li').each(function(i) {
$(this).on('click', () => {
toggleableDivs.addClass('nf-hide');
toggleableDivs.eq(i).removeClass('nf-hide');
});
});
.nf-hide {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row margin-top-10 data-c">
<div class="col col-12 margin-top-10 nf-short-desc">
<div class="nf-short-desc-c">
<input type="text" name="" class="txtbox noah-forms-textbox" placeholder="Short answer text">
<span></span>
</div>
</div>
<div class="col col-12 margin-top-10 nf-para-c nf-hide">
<div class="nf-para-input">
<input type="text" name="" class="txtbox noah-forms-textbox" placeholder="Long answer text">
<span></span>
</div>
</div>
<div class="col col-12 margin-top-10 nf-date-c nf-hide">
<div class="nf-date-input">
<input type="date" name="" class="txtbox noah-forms-textbox" placeholder="Short answer text">
<span></span>
</div>
</div>
<div class="col col-12 margin-top-10 nf-time-c nf-hide">
<div class="nf-time-input">
<input type="time" name="" class="txtbox noah-forms-textbox" placeholder="Long answer text">
<span></span>
</div>
</div>
<div class="col col-12 child-centered nf-main-c nf-hide" id="nf_1">
<div class="rdo-wrapper fullwidth" id="opt_1">
<input id="rdo8" type="radio" name="sample4" class="rdo">
<label class="lbl-rdo fullwidth noah-forms-lbl nf-opt-lbl" for="rdo8">
<div class="col col-12">
<div class="nf-opt-c">
<div class="nf-input-opt">
<input type="text" name="" class="txtbox noah-forms-textbox nf-opt" value="Option 1">
<span></span>
</div>
<div class="nf-aImage-c">
<div class="nf-opt-icon _nf-aImage-opt"></div>
</div>
<div class="nf-close-c">
<div class="nf-opt-icon _nf-close-opt"></div>
</div>
</div>
</div>
</label>
</div>
</div>
</div>
<div class="nf-dropdown">
<div class="nf-select-c">
<div class="nf-default-opt">
<div class="nf-li">
<div class="nf-opt" data-value="nf-multi">
<div class="nf-icon _nf-icon-chk"></div>
<div class="nf-p">Multiple Choice</div>
</div>
</div>
</div>
<div class="nf-opt-ul">
<div class="nf-li">
<div class="nf-opt _nf-short-ans" data-value="nf-short-ans">
<div class="nf-icon _nf-icon-s-ans"></div>
<div class="nf-p">Short Answer</div>
</div>
</div>
<div class="nf-li">
<div class="nf-opt _nf-para" data-value="nf-para">
<div class="nf-icon _nf-icon-para"></div>
<div class="nf-p">Paragraph</div>
</div>
</div>
<hr>
<div class="nf-li">
<div class="nf-opt _nf-multi-choice" data-value="nf-multi">
<div class="nf-icon _nf-icon-mchoice"></div>
<div class="nf-p">Multiple Choice</div>
</div>
</div>
<div class="nf-li">
<div class="nf-opt _nf-checkbox" data-value="nf-check">
<div class="nf-icon _nf-icon-checkbox"></div>
<div class="nf-p">CheckBoxes</div>
</div>
</div>
<hr>
<div class="nf-li">
<div class="nf-opt _nf-date" data-value="nf-date">
<div class="nf-icon _nf-icon-date"></div>
<div class="nf-p">Date</div>
</div>
</div>
<div class="nf-li">
<div class="nf-opt _nf-time" data-value="nf-time">
<div class="nf-icon _nf-icon-time"></div>
<div class="nf-p">Time</div>
</div>
</div>
</div>
</div>
</div>

How to load a textfile into array with Javascript?

could you help me how to load a textfile into an array via Javascript via a local file?
I'm pretty much a beginner in programming und want to develope a small vocabulary test for my niece. Currently, I am writing the questions and solutions manually. However, I want to just a load a local file, which I can use and then work via array-indexes, if possible. Could you help me here and explain to me how I can load a local textfile into an array?
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Vokabeltrainer</title>
<meta http-equiv="cache-control" content="no-cache">
<script src=#"></script>
<script src="#"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
</head>
<body>
<main>
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
<h1>Leonie's Vokabeltrainer</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
<img src="pictures/Bild3.jpg">
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
<p>Liebe Leonie, hier kannst Du die Verbformen für das Simple Present üben!</p>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-sm-12 col-md-12">
<strong>Grundform</strong>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<strong>Personalpronomen</strong>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<strong>Simple Present:</strong>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<!--Hier kommt die Lösung hin, wenn falsch oder richtig geraten wurde-->
</div>
</div>
<div class="row">
<div class="col-lg-2 col-sm-12 col-md-12">
(to) run
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
He...
</div>
<div class="col-lg-3 col-sm-12 col-md-12">
<input type="text" id="check1">
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<button onclick="checkSolution()">Prüfen!</button>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<p id="solution1">
</div>
</div>
<div class="row">
<div class="col-lg-2 col-sm-12 col-md-12">
(to) go
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
They...
</div>
<div class="col-lg-3 col-sm-12 col-md-12">
<input type="text">
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<button>Prüfen!</button>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<!--Hier kommt die Lösung hin, wenn falsch oder richtig geraten wurde-->
</div>
</div>
<div class="row">
<div class="col-lg-2 col-sm-12 col-md-12">
(to) carry
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
She...
</div>
<div class="col-lg-3 col-sm-12 col-md-12">
<input type="text">
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<button>Prüfen!</button>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<!--Hier kommt die Lösung hin, wenn falsch oder richtig geraten wurde-->
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
<p id="punke">
</div>
</div>
</div>
</main>
</body>
<script>
let counter = 0;
function checkSolution() {
InputText = document.getElementById("check1").value;
if (InputText === 'runs') {
document.getElementById('solution1').innerHTML = 'super';
counter++;
document.getElementById('punke').innerHTML ='Deine Punkte: ' +counter;
}
else {
document.getElementById('solution1').innerHTML = 'nicht super';
}
}
</script>
</html>

Using plain JS
var dataFile = require("dataFile");
dataFile.readFile("./yourFile.txt", function(text){
var textByLine = text.split("\n")
});

How do I make my data appear in a CSV file in Node.js?

I am trying to make the data that this function generates appear in my CSV file. However, when it creates the CSV file there is no data and it's a blank csv document. Any suggestions?
const fs = require('fs');
const csv = await page.$$eval('.product_desc_txt', function(products){
// Iterate over product descriptions
let csvLines = products.map(function(product){
// Inside of each product find product SKU and its price
let productId = product.querySelector("div.product_desc_txt > div.body-copy.custom-body-copy").innerText.trim();
let productPrice = product.querySelector("span[data-wishlist-linkfee]").innerText.trim();
// Format them as a csv line
return `${productId};${productPrice}`;
});
// Join all lines into one file
return csvLines.join("\n");
});
fs.writeFileSync("test.csv", csv);
});
This is the code from the source, it basically repeats itself over and over with different item numbers and prices. I just need the item number and price. looped over.
<div class="list-tbl">
<div class="row" data-body-header>
<div class="col-xs-12">
<div class="split-line split-line-header-gap">
<div class="row">
<div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-2 body-copy">
<div class="style-check">
<input type="checkbox" id = "selectall" name="selectall" value="279114616" class="selectall">
<label for="selectall">
<span>All</span>
</label>
</div>
</div>
<div class="col-xl-1 col-lg-1 col-md-2 col-sm-3 col-xs-4 body-copy"></div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-4 col-xs-6 body-copy">
<span class="hidden visible-lg visible-xl">Item</span>
</div>
<div class="col-xl-2 col-lg-2 text-right body-copy hidden visible-xl">
Price
</div>
<div class="col-xl-1 body-copy hidden visible-xl"></div>
<div class="col-xl-1 col-lg-1 col-md-2 body-copy hidden visible-xl visible-lg">
Quantity
</div>
<div class="col-xl-3 col-lg-4 col-md-4 body-copy hidden visible-xl visible-lg visible-md"></div>
</div>
</div>
</div>
</div>
<input type="hidden" id="isBDAppVar" value="BD" />
<input type="hidden" class="orderItem-2000423036" value="237459854"/>
<div class="row item-row" id = "2000423036" data-body-row>
<div class="col-xs-12">
<div class="split-line split-line-gap">
<div class="row">
<div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-2">
<div class="style-check marg_chk">
<input type="checkbox" class="checkbox" name="select" id ="select_0" value="0">
<label for="select_0">
<span class="hide">
Select
Item
</span>
</label>
</div>
</div>
<div class="col-xl-1 col-lg-1 col-md-2 col-sm-3 col-xs-4">
<div class="product-img-holder">
<img class="img-responsive prod-image-coming-soon" title="Pringles Snack Pack Potato Crisps, Original, 0.67 oz, 60 ct"
src="https://images.costcobusinessdelivery.com/ImageDelivery/imageService?profileId=12028466&imageId=1055688__1&recipeName=350"
onerror="this.onerror='';this.src='/wcsstore/CostcoGLOBALSAS/images/prod-image-coming-soon.svg';this.alt='Product Image Coming Soon'"
alt="Shoping List Product Image" />
</div>
</div>
<!-- price + linkfee based on region -->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-8 col-xs-6">
<div class="product_desc_txt">
<a href=" https://www.costcobusinessdelivery.com/.product.1055688.html " class="body-copy-link">
Pringles Snack Pack Potato Crisps, Original, 0.67 oz, 60 ct
</a>
<div class="body-copy custom-body-copy">
Item 1055688
</div>
<div class="margin_tp_10"></div>
<div class="body-copy hidden visible-md visible-sm visible-xs visible-lg">
<span data-wishlist-linkfee="false" > $15.89</span>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-2 body-copy text-right hidden visible-xl ">
<span data-wishlist-linkfee="false" > $15.89</span>
</div>

Get text of label sibling of checked checked using javascript

I want to be able to check if the input is checked and if it is checked then grab the data associated with that input and display it into another div. here is my code.
var levels = $('input:checked + label').map(function() {
return $(this).text();
}).get();
//alert(levels);
document.getElementById('listprice').innerHTML = levels;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
<div class="col-md-12">
<div class="row sln-steps-info sln-service-info">
<div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
<div class="sln-checkbox">
<input type="checkbox" name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
<label for="sln_services_3181"></label>
</div>
</div>
<div class="col-xs-10 col-sm-8">
<label for="sln_services_3181">
<h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this -->
</label>
</div>
<div class="col-xs-2 visible-xs-block"></div>
<h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
</div>
<div class="row sln-steps-description sln-service-description">
<div class="col-md-12"><hr></div>
<div class="col-sm-1 hidden-xs"> </div>
<div class="col-sm-10 col-md-9">
<label for="sln_services_3181">
<p></p>
<span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
</label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11">
<span class="errors-area" data-class="sln-alert sln-alert-medium sln-alert--problem">
<div class="sln-alert sln-alert-medium sln-alert--problem" style="display: none" id="availabilityerror">
Not enough time for this service
</div>
</span>
</div>
</div>
</div>
<div class="demo">
You are booking a
<div id="listprice">
<!-- display collected here -->
</div>
</div>
I would like to collect the data and show it back in a div somewhere else on the page. Any jquery to help achieve this would be great.

$(document).ready(function(){
var checkedItems = $('input[type=checkbox]:checked');
checkedItems.each(function(){
var serviceName = $(this).parents('.sln-service-info').find('.sln-service-name').html();
var servicePrice = $(this).parents('.sln-service-info').find('.sln-service-price').html();
$('#listprice').append('<div>Title - '+serviceName +' Price - ' +servicePrice +'</div>');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
<div class="col-md-12">
<div class="row sln-steps-info sln-service-info">
<div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
<div class="sln-checkbox">
<input type="checkbox" checked name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
<label for="sln_services_3181"></label>
</div>
</div>
<div class="col-xs-10 col-sm-8">
<label for="sln_services_3181">
<h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this-->
</label>
</div>
<div class="col-xs-2 visible-xs-block"></div>
<h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
</div>
<div class="row sln-steps-description sln-service-description">
<div class="col-md-12"><hr></div>
<div class="col-sm-1 hidden-xs"> </div>
<div class="col-sm-10 col-md-9">
<label for="sln_services_3181">
<p></p>
<span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
</label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="demo">
You are booking a
<div id="listprice">
<!-- display collected here -->
</div>
</div>

How to remove radio button checked attribute from previously selected?

I have some radio buttons and I am adding checked attribute to selected radio button but having one problem. I want to remove checked="checked" attribute from radio button which selected.
HTML Code:
<div class="tabtwo-info">
<div class="tab-two">
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Unsecured Loans
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Secured 2nd Charge Lending
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Overdrafts
</div>
</div>
</a>
</div>
<div class="seperator">
<div class="container">
<div class="row"> <span class="sep"></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Trade Finance
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Business Cash Advance
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Working Capital
</div>
</div>
</a>
</div>
<div class="seperator">
<div class="container">
<div class="row"> <span class="sep"></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Stock Finance
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 "> <a class="brokersector" href="javascript:void(0);">
<input type="radio" value="" id="" name="brokersector">
<div class="image-cat-box">
<div class="image-box">
</div>
<div class="title-cat">
Acquisition Finance
</div>
</div>
</a>
</div>
<div class="seperator">
<div class="container">
<div class="row"> <span class="sep"></span>
</div>
</div>
</div>
</div>
</div>
jQuery Code:
$(".tabtwo-info .brokersector").click(function () {
$(this).find('input:radio').attr('checked', true);
});
My JSFiddle: https://jsfiddle.net/jj57q8fs/
JSFiddle Screenshot:

To force a remove of the attribute, before checking a new:
$(".brokersector").click(function () {
$('input[type=radio]').removeAttr('checked');
$(this).find('input[type=radio]').attr('checked', 'checked');
});
This will force an removal of all checked on any radio button, before a new radio is set. The selector can be more specific of course, like in Idir's example.
Also, #Regent posted a fiddle using prop instead. I would suggest you use this, as it states in the documentation:
Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does.

try this,
$(".tabtwo-info .brokersector").click(function() {
$('input[name=brokersector]').removeAttr('checked');
$(this).find('input:radio').attr('checked', 'checked');
});

I agree with [Rory McCrossan][1], you don't need jQuery for that. but here is what you can do this:
$('input[name=brokersector]:checked').removeAttr('checked');

$(".tabtwo-info .brokersector").click(function () {
$("input:radio").removeAttr("checked");
$(this).find('input:radio').attr('checked', true);
});
});