Develop Reference

how to make radio button independent of others in vuejs

I am making a checklist, I have the categories and each category has its intervention, you have to check according to what corresponds to the problem that is that for example.
CheckList.vue
<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2" style="vertical-align: top">Categoria</th>
<th colspan="2">Existe</th>
<th colspan="3">Estado</th>
<th colspan="2" rowspan="2" style="vertical-align: top">
Observación
</th>
</tr>
<tr>
<th>Si</th>
<th>No</th>
<th>Bueno</th>
<th>Regular</th>
<th>Malo</th>
</tr>
</thead>
<tbody
v-for="(formatchecklist, index) in formatchecklists"
:key="index"
>
<tr>
<td colspan="8" class="table-secondary">
<em>{{ index + 1 }}.- {{ formatchecklist.categoria }}</em>
</td>
</tr>
<tr
v-for="intervencion in formatchecklist.intervenciones"
:key="intervencion.id"
>
<td>{{ intervencion.intervencion }}</td>
<td class="text-center">
<input
type="radio"
name="existe"
value="si"
v-model="checkExiste"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
name="existe"
value="no"
v-model="checkExiste"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
name="estado"
value="bueno"
v-model="checkEstado"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
name="estado"
value="regular"
v-model="checkEstado"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
name="estado"
value="malo"
v-model="checkEstado"
/>
<label></label>
</td>
<td>
<textarea
name="observacion"
class="form-control"
></textarea>
</td>
<td>
<a
class="btn btn-warning btn-sm"
#click.prevent=""
title="Editar"
>
<i class="fas fa-edit"></i>
</a>
</td>
</tr>
</tbody>
</table>
When selecting the first radio there is no problem, the problem is when selecting the second radio of the second row, intervention 2, the first one is deselected.
https://codepen.io/lucascardemil/pen/GRMejWK
and how can i get that data

The radios' names are the same so each rows' radio whose name is existe will action like radio group,so only one is selected.
In other words, you need to assign different names for each rows' radio button group.And the model-binding you also need to be changed to save it correctly corresponding to each intervencion if necessary.
Below is my sample code in vuejs 2 which you could refer to.
<template>
<div>
<table class="table table-bordered" style="width: 100%;">
<thead>
<tr>
<th rowspan="2" style="vertical-align: top">Categoria</th>
<th colspan="2">Existe</th>
<th colspan="3">Estado</th>
<th colspan="2" rowspan="2" style="vertical-align: top">
Observación
</th>
</tr>
<tr>
<th>Si</th>
<th>No</th>
<th>Bueno</th>
<th>Regular</th>
<th>Malo</th>
</tr>
</thead>
<tbody
v-for="(formatchecklist, index) in formatchecklists"
:key="index"
>
<tr>
<td colspan="8" class="table-secondary">
<em>{{ index + 1 }}.- {{ formatchecklist.categoria }}</em>
</td>
</tr>
<tr
v-for="intervencion in formatchecklist.intervenciones"
:key="intervencion.id"
>
<td>{{ intervencion.intervencion }}</td>
<td class="text-center">
<input
type="radio"
:name="'existe' + intervencion.id"
value="si"
v-model="intervencion.existeValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'existe' + intervencion.id"
value="no"
v-model="intervencion.existeValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'estado' + intervencion.id"
value="bueno"
v-model="intervencion.estadoValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'estado' + intervencion.id"
value="regular"
v-model="intervencion.estadoValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'estado' + intervencion.id"
value="malo"
v-model="intervencion.estadoValue"
/>
<label></label>
</td>
<td>
<textarea
:name="'observacion' + intervencion.id"
v-model="intervencion.observacion"
class="form-control"
></textarea>
</td>
<td>
<a
class="btn btn-warning btn-sm"
#click.prevent=""
title="Editar"
>
<i class="fas fa-edit"></i>
</a>
</td>
</tr>
</tbody>
</table>
<pre>
{{JSON.stringify(formatchecklists, null, 2)}}
</pre>
</div>
</template>
<script>
export default {
data() {
return {
formatchecklists :[{
"categoria":"category1",
"intervenciones":[{
"id":1,
"intervencion":"intervencion1",
"existeValue":"",
"estadoValue":"",
"observacion":""
},
{
"id":2,
"intervencion":"intervencion2",
"existeValue":"",
"estadoValue":"",
"observacion":""
}]
},
{
"categoria":"category2",
"intervenciones":[{
"id":3,
"intervencion":"intervencion3",
"existeValue":"",
"estadoValue":"",
"observacion":""
},
{
"id":4,
"intervencion":"intervencion4",
"existeValue":"",
"estadoValue":"",
"observacion":""
}]
}]
};
}
};
</script>

Jquery appended data stacks on top of eachother instead of over the table lenght

I have some data from a AJAX GET request I would like to append to a table.
This is my HTML:
<form>
<table id="project-table" class="table table-striped table-inverse table-responsive">
<caption>Projects</caption>
<thead class="thead-inverse">
<tr>
<th scope="col">#</th>
<th scope="col">Project name</th>
<th scope="col">Description</th>
<th scope="col">Estimated time (min)</th>
<th scope="col">Actual time (min)</th>
<th scope="col">Add task</th>
<th scope="col">Delete project</th>
</tr>
</thead>
<tbody id="project-body">
</tbody>
</table>
</form>
I would like to append my data inside the tbody with the id of project-body.
I append my data like this:
$('#project-body').append(
`
<tr>
<td> <input class="form-control" type="hidden" name="projectid" id="projectid > </td>
<td> <input class="form-control" type="text" name="projectName" id="projectName > </td>
<td> <input class="form-control" type="text" name="description" id="description > </td>
<td> <input class="form-control" type="text" name="estimatedTime" id="estimatedTime > </td>
<td> <input class="form-control" type="text" name="actualTime" id="actualTime > </td>
<td> <a id="addTask" class="btn btn-info" href="Overview.php" role="button"> <i class="fa fa-angle-right" aria-hidden="true"> </i> Add task </td>
<td> <button type="submit" id="deleteProject" name="deleteProject" class="btn btn-danger"> <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project </button> </td>
</tr>
`
);
The problem is that all of my TD elements seem to either be not showing at all or are stacking on top of each other. Normally i would like my data to spread vertically over my table filling the all of the table heads

You have missed to add value attribute to each input.
Here is a working example:
$('#add-row').on('click', function(e){
$('#project-body').append(
`
<tr>
<td>
<input class="form-control" type="hidden" name="projectid" id="projectid value="1">
</td>
<td>
<input class="form-control" type="text" name="projectName" id="projectName value="Some value">
</td>
<td>
<input class="form-control" type="text" name="description" id="description value="Some value">
</td>
<td>
<input class="form-control" type="text" name="estimatedTime" id="estimatedTime value="Some value">
</td>
<td>
<input class="form-control" type="text" name="actualTime" id="actualTime value="Some value">
</td>
<td>
<a id="addTask" class="btn btn-info" href="Overview.php" role="button">
<i class="fa fa-angle-right" aria-hidden="true"> </i> Add task
</a>
</td>
<td>
<button type="submit" id="deleteProject" name="deleteProject" class="btn btn-danger">
<i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
</button>
</td>
</tr>
`
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add-row">Add row</button>
<form>
<table id="project-table" class="table table-striped table-inverse table-responsive">
<caption>Projects</caption>
<thead class="thead-inverse">
<tr>
<th scope="col">#</th>
<th scope="col">Project name</th>
<th scope="col">Description</th>
<th scope="col">Estimated time (min)</th>
<th scope="col">Actual time (min)</th>
<th scope="col">Add task</th>
<th scope="col">Delete project</th>
</tr>
</thead>
<tbody id="project-body">
</tbody>
</table>
</form>
Hope it helps.

Cannot update all table rows using jquery

I want to update all table rows in a table i have given id to tbody i.e. cartupdate but when i click the update button the rows are not updated. Actually all rows are coming from ajax request but to explain my problem i have taken static row in javascript variable. Please help to sort out my issue.
$(document).on('click', '.update_btn', function(e) {
var test = "<tr><td class='action'><a href='#' id='c9f' class='remove_car'><i class='fa fa-times' aria-hidden='true'></i></a></td><td class='cart_product_desc'> <h5>Product 2</h5> </td><td><span> S </span></td><td class='price'><span>$334</span></td><td class='qty'> <div class='quantity> <input type='number' class='qty-text' id='qty' step='1' min='1' max='1' name='quantity' value=3 disabled> </div> </td> <td class='total_price'><span>1,002</span></td> </tr></tbody><tfoot> <tr> <td><strong>Total</strong></td> <td><strong>Rs 1500</strong></td></tr>";
$("#cartupdate").empty();
$("#cartupdate").html(test);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="table table-responsive">
<thead>
<tr>
<th><i class="fa fa-trash-o" aria-hidden="true"></i></th>
<th>Product</th>
<th>Size</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody id="cartupdate">
<tr>
<td class="action"><i class="fa fa-times" aria-hidden="true"></i></td>
<td class="cart_product_desc">
<h5>Product 1</h5>
</td>
<td>
<span> S </span>
</td>
<td class="price"><span>$334</span></td>
<td class="qty">
<div class="quantity">
<input type="number" class="qty-text" id="qty" step="1" min="1" max="1" name="quantity" value=3 disabled>
</div>
</td>
<td class="total_price"><span>1,002</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong>Total</strong></td>
<td><strong>Rs 1,002</strong></td>
</tr>
</table>
<input type="button" value="Update" class="update_btn" />

The problem is because the HTML you're injecting in to #cartupdate contains half of a tbody and half of a tfoot. This is invalid. You have to inject complete elements only. As such your tablelayout is broken.
To fix this amend the HTML you inject to include <tbody> tag at the start and a </tfoot> element at the end. Then you need to remove the existing tbody and tfoot before you append the new HTML to the table. Try this:
$(document).on('click', '.update_btn', function(e) {
var html = '<tbody><tr><td class="action"><i class="fa fa-times" aria-hidden="true"></i></td><td class="cart_product_desc"><h5>Product 2</h5></td><td><span>S </span></td><td class="price"><span>$334</span></td><td class="qty"><div class="quantity"><input type="number" class="qty-text" id="qty" step="1" min="1" max="1" name="quantity" value="3" disabled></div></td><td class="total_price"><span>1,002</span></td></tr></tbody><tfoot><tr><td><strong>Total</strong></td><td><strong>Rs 1500</strong></td></tr>';
var $table = $('table');
$table.find('tbody, tfoot').remove();
$table.append(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="table table-responsive">
<thead>
<tr>
<th><i class="fa fa-trash-o" aria-hidden="true"></i></th>
<th>Product</th>
<th>Size</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="action"><i class="fa fa-times" aria-hidden="true"></i></td>
<td class="cart_product_desc">
<h5>Product 1</h5>
</td>
<td>
<span> S </span>
</td>
<td class="price"><span>$334</span></td>
<td class="qty">
<div class="quantity">
<input type="number" class="qty-text" id="qty" step="1" min="1" max="1" name="quantity" value=3 disabled>
</div>
</td>
<td class="total_price"><span>1,002</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong>Total</strong></td>
<td><strong>Rs 1,002</strong></td>
</tr>
</table>
<input type="button" value="Update" class="update_btn" />

HTML:Highlight selected link or label

In my Html Page I need to keep the link selected when i click on it:
The HTML Code:
<table class="main-dev">
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelA
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelB
</a>
</td>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelC
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelD
</a>
</td>
</tr>
</table>
The Other option is to change the link with simple label, and need to keep the label selected when click on it:
The Html code will be:
<table class="main-dev">
<tr>
<td>
labelA
</td>
</tr>
<tr>
<td>
labelB
</td>
</td>
</tr>
<tr>
<td>
labelC
</td>
</tr>
<tr>
<td>
labelD
</td>
</tr>
</table>

you can do this easily with JQ . see snippet below
if you want to remove selected class when click again on the same link, change addClass to toggleClass
var link = $(".titleForm")
$(link).on("click",function() {
var otherLinks = $(this).parents("tr").siblings().find(".selected")
$(this).addClass("selected")
$(otherLinks).removeClass("selected")
})
.selected {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="main-dev">
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelA
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelB
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelC
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelD
</a>
</td>
</tr>
</table>

Select or deselect the checkbox

I have an HTML as follow :
<table class="responsive display table table-bordered">
<tbody>
<tr>
<th>Sr No</th>
<th>Student Code</th>
<th>Student Name</th>
<th>Date Of Birth</th>
<th>Action</th>
<th>Select <a data-placement="left" rel="tooltip" title="Select All"><input id="checkAll" name="deleteselect[]" value="0" type="checkbox"></a></th>
</tr>
<form action="" method="post"></form>
<tr>
<td>1</td>
<td>1001</td>
<td>Rohit Singhal </td>
<td>17-4-1988</td>
<td>
<a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=update&id=2" rel="tooltip" title="update" class="update">
<i class="icon-pencil"></i>
</a>
<a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=delete&id=2" onclick="return show_confirm();" rel="tooltip" title="Delete" class="delete">
<i class="icon-trash"></i>
</a>
</td>
<td>
<input name="deleteselect[]" value="2" type="checkbox">
</td>
</tr>
<tr>
<td>2</td>
<td>1003</td>
<td>Lisa Kurdow </td>
<td>24-7-1965</td>
<td> <i class="icon-pencil"></i> <i class="icon-trash"></i></td><td><input name="deleteselect[]" value="6" type="checkbox"></td></tr>
</tbody></table>
I have a select all checkbox with id checkAll What I want is that when I click on this checkbox then it should select/deselect all the remaining check box in table
I have used the code :
<script type="text/javascript">
jQuery(document).ready(function (){
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
});
</script>
But when I click on selectAll checkbox then it does not select the checkboxes. Please help me what is missing in it ?

If you get jQuery(...).prop not a function error, it means you are using an old version of jQuery (< 1.6). Very old, it is recommended to update the jQuery. Use this code then:
<script type="text/javascript">
jQuery(document).ready(function (){
jQuery("#checkAll").change(function () {
if (this.checked)
jQuery("input:checkbox").attr('checked', "checked");
else
jQuery("input:checkbox").removeAttr('checked');
});
});
</script>

You can use bellow code. I tested it's working fine.
$(document).ready(function(){
$("#checkAll").change(function () {
$("input:checkbox").attr('checked', this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<table class="responsive display table table-bordered">
<tbody>
<tr>
<th>Sr No</th>
<th>Student Code</th>
<th>Student Name</th>
<th>Date Of Birth</th>
<th>Action</th>
<th>Select <a data-placement="left" rel="tooltip" title="Select All"><input id="checkAll" name="deleteselect[]" value="0" type="checkbox"></a></th>
</tr>
<form action="" method="post"></form>
<tr>
<td>1</td>
<td>1001</td>
<td>Rohit Singhal </td>
<td>17-4-1988</td>
<td>
<a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=update&id=2" rel="tooltip" title="update" class="update">
<i class="icon-pencil"></i>
</a>
<a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=delete&id=2" onclick="return show_confirm();" rel="tooltip" title="Delete" class="delete">
<i class="icon-trash"></i>
</a>
</td>
<td>
<input name="deleteselect[]" value="2" type="checkbox">
</td>
</tr>
<tr>
<td>2</td>
<td>1003</td>
<td>Lisa Kurdow </td>
<td>24-7-1965</td>
<td> <i class="icon-pencil"></i> <i class="icon-trash"></i></td><td><input name="deleteselect[]" value="6" type="checkbox"></td></tr>
</tbody></table>