How to filter observable array and return the same

How to filter observable array and return the same

I have observable array. I want to filter observable depending upon some
text. I will select option button and depending upon it i need to filter
observable array and bind to table. Here is my code till now. This is my
view
<table>
<tbody data-bind="foreach: dataOne">
<tr >
<td data-bind="text: id"></td><td >&nbsp;&nbsp;&nbsp;</td>
<td data-bind="text: display"></td><td >&nbsp;&nbsp;&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
<table >
<tr>
<td><input name="optbtn" type="radio" value="All"/> All</td>
<td><input name="optbtn" type="radio" value="Selected"/>
Selected</td>
</tr>
</table>
Here is my view model
var data1 = [{
name1: "one",
id: 1,
display: "<temp>Is this employee</temp> required <val>in our company</val>"
}, {
name1: "two",
id: 2,
display: "<temp>Is this bachelor</temp>required in our group"
}, {
name1: "three",
id: 3,
display: "Test"
}];
var viewModel = {
dataOne: ko.observableArray(data1),
};
$("input[name='optbtn']").change(function (e) {
debugger;
var str = "<temp>";
var stringFromArray = "";
if ($(this).val() == "All") {
alert("All");
}
else {
ko.utils.arrayFirst(self.dataOne(), function (data) {
debugger;
stringFromArray = data.display();
if (stringFromArray.indexOf(str) == 0) {
return data.display();
}
});
}
});
ko.applyBindings(viewModel);
If i select "Selected" option button then it should only return with text
"<temp>in it. So it should return only 2 records.
How can i achieve this? When i load my page it will show all records and
mark "All" button as selected. When i selected "Selected" then it must
filter records.