JSFiddle - React, Tailwind, and code Playground
HTML
<form action="" method="POST">
<table width="100%">
<tr><td>Scheibe</td>
<td>Leer</td>
<td>Name</td>
<td>Verein</td>
<td>Klasse</td>
<td>Startgeld bezahlt?</td>
</tr>
<tr><td>1 A:</td>
<td><input type="checkbox" name="leer_1A" value="1" /></td>
<td><input type="text" name="name_1A" maxlenght="100" value="Phillip S" /></td>
<td><select name="verein_1A" size="1" >
<option>Bitte Verein wählen</option>
<option value="1" selected >BSC Schrobenhausen</option>
<option value="new">Neuen Verein eintragen</option>
</select></td>
<td><select name="klasse_1A" size="1" ><option>Bitte Klasse wählen</option></select></td
><td>Ja <input type="radio" name="bezahlt_1A" value="1" /><input type="radio" name="bezahlt_1A" value="0" /> Nein</td></tr>
<tr><td>1 B:</td>
<td><input type="checkbox" name="leer_1B" value="1" checked ></td>
<td><input type="text" name="name_1B" maxlenght="100" value="" /></td>
<td><select name="verein_1B" size="1"><option>Bitte Verein wählen</option><option value="1" >BSC Schrobenhausen</option><option value="new">Neuen Verein eintragen</option></select></td>
<td><select name="klasse_1B" size="1"><option>Bitte Klasse wählen</option></select></td>
<td>Ja <input type="radio" name="bezahlt_1B" value="1" /> <input type="radio" name="bezahlt_1B" value="0" /> Nein</td></tr>
<tr><td>1 C:</td>
<td><input type="checkbox" name="leer_1C" value="1" checked /></td>
<td><input type="text" name="name_1C" maxlenght="100" value="" /></td>
<td><select name="verein_1C" size="1"><option>Bitte Verein wählen</option><option value="1" >BSC Schrobenhausen</option><option value="new">Neuen Verein eintragen</option></select></td>
<td><select name="klasse_1C" size="1"><option>Bitte Klasse wählen</option></select></td>
<td>Ja <input type="radio" name="bezahlt_1C" value="1" /> <input type="radio" name="bezahlt_1C" value="0" /> Nein</td></tr>
<tr><td>1 D:</td>
<td><input type="checkbox" name="leer_1D" value="1" checked /></td>
<td><input type="text" name="name_1D"...
JavaScript
var x = '';
var y = '';
var z = '';
$("table input:checkbox").on("click", function(){
x = $(this).attr("name").split("_"); // gibt die ID zurück
y = $(this).prop("checked"); // gibt den status der checkbox zurück
z = $(this).val(); // gibt den value wert zurück
if(y == true){
$("input[name$='name_"+x[1]+"']").val("");
$("select[name$='verein_"+x[1]+"'] option:first").attr('selected','selected');
$("select[name$='klasse_"+x[1]+"'] option:first").attr('selected','selected');
$("input[name$='bezahlt_"+x[1]+"']").attr("checked", false);
}
});
$("table input:text").on("click", function(){
x = $(this).attr("name").split("_");
z = $(this).val();
if(!$(this).is('empty')) {
$("input[name$='leer_"+x[1]+"']").attr("checked", false);
}
});
$("table select").on("click", function(){
x = $(this).attr("name").split("_");
z = $(this).val();
if(!$(this).is('empty')) {
$("input[name$='leer_"+x[1]+"']").attr("checked", false);
}
});
$("table select").on("click", function(){
x = $(this).attr("name").split("_");
z = $(this).val();
if (z == "new") {
var new_verein = prompt("Bitte neuen Verein angeben:");
}
})
$("table input:radio").on("click", function(){
x = $(this).attr("name").split("_");
z = $(this).val();
if (!$(this).is('empty')) {
$("input[name$='leer_"+x[1]+"']").attr("checked", false);
}
});