Wie gebe ich den Wert eines aktivierten Optionsfelds aus?

Wie erhalte ich den Wert eines aktivierten Optionsfelds und gebe es in einem entsprechenden Element aus?Wie gebe ich den Wert eines aktivierten Optionsfelds aus?

Ich laufe auf Probleme, da ich die Werte der aktivierten Radiobuttons beim Laden der Seite laden möchte.

Vielen Dank im Voraus!

input{ 
 
display: none; 
 
} 
 

 
label{ 
 
display: inline-block; 
 
width:20%; 
 
cursor: pointer; 
 
padding: 20px; 
 
margin: 10px; 
 
background: #eee; 
 
color: #111; 
 
} 
 

 
input:checked + label{ 
 
background: #111; 
 
color: #fff; 
 
} 
 

 
div{ 
 
    background: #111; 
 
    color: #fff; 
 
    padding: 10px; 
 
    margin: 4px; 
 
} 
 

 
div span{ 
 
    display: block; 
 
    margin: 4px; 
 
} 
 

 
.title{ 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="a" type="radio" name="group1" value="Description group1 1" checked> 
 
<label for="a">Group1 Radio1</label> 
 
<input id="b" type="radio" name="group1" value="Description group1 2"> 
 
<label for="b">Group1 Radio2</label> 
 
<input id="c" type="radio" name="group1" value="Description group1 3"> 
 
<label for="c">Group1 Radio3</label> 
 

 

 
<input id="d" type="radio" name="group2" value="Description group2 1" checked> 
 
<label for="d">Group2 Radio1</label> 
 
<input id="e" type="radio" name="group2" value="Description group2 2"> 
 
<label for="e">Group2 Radio2</label> 
 
<input id="f" type="radio" name="group2" value="Description group2 3"> 
 
<label for="f">Group2 Radio3</label> 
 

 
<!-- Output value here --> 
 
<div id="group1"> 
 
<span class="title">Group1</span> 
 
<span class="selected"></span> 
 
</div> 
 

 
<div id="group2"> 
 
<span class="title">Group2</span> 
 
<span class="selected"></span> 
 
</div>

Quelle

2016-10-04 Arthur S.

Haben Sie schon JS oder fragen Sie nach einem Tutorial? In beiden Fällen versuchen Sie zuerst die Suche: http://stackoverflow.com/questions/8622336/jquery-get-value-of-selected-radio-button – mwoelk

können Sie das Änderungsereignis verwenden:

$(':radio[name="group1"], :radio[name="group2"]').on('change', function(e) { 
 
    $('#' + this.getAttribute('name') + ' .selected').text(this.value); 
 
}); 
 

 
// 
 
// This to get the checked radios 
 
// 
 
$(':radio[name="group1"]:checked, :radio[name="group2"]:checked').trigger('change');

input{ 
 
    display: none; 
 
} 
 

 
label{ 
 
    display: inline-block; 
 
    width:20%; 
 
    cursor: pointer; 
 
    padding: 20px; 
 
    margin: 10px; 
 
    background: #eee; 
 
    color: #111; 
 
} 
 

 
input:checked + label{ 
 
    background: #111; 
 
    color: #fff; 
 
} 
 

 
div{ 
 
    background: #111; 
 
    color: #fff; 
 
    padding: 10px; 
 
    margin: 4px; 
 
} 
 

 
div span{ 
 
    display: block; 
 
    margin: 4px; 
 
} 
 

 
.title{ 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 

 
<input id="a" type="radio" name="group1" value="Description group1 1" checked> 
 
<label for="a">Group1 Radio1</label> 
 
<input id="b" type="radio" name="group1" value="Description group1 2"> 
 
<label for="b">Group1 Radio2</label> 
 
<input id="c" type="radio" name="group1" value="Description group1 3"> 
 
<label for="c">Group1 Radio3</label> 
 

 

 
<input id="d" type="radio" name="group2" value="Description group2 1" checked> 
 
<label for="d">Group2 Radio1</label> 
 
<input id="e" type="radio" name="group2" value="Description group2 2"> 
 
<label for="e">Group2 Radio2</label> 
 
<input id="f" type="radio" name="group2" value="Description group2 3"> 
 
<label for="f">Group2 Radio3</label> 
 

 
<!-- Output value here --> 
 
<div id="group1"> 
 
    <span class="title">Group1</span> 
 
    <span class="selected"></span> 
 
</div> 
 

 
<div id="group2"> 
 
    <span class="title">Group2</span> 
 
    <span class="selected"></span> 
 
</div>

Quelle

2016-10-04 16:24:34 gaetanoM

$(document).ready(function(){ 
 
    $("#group1 .selected").html($("input[name=group1]:checked").val()); 
 
    $("#group2 .selected").html($("input[name=group2]:checked").val()); 
 
})

input{ 
 
display: none; 
 
} 
 

 
label{ 
 
display: inline-block; 
 
width:20%; 
 
cursor: pointer; 
 
padding: 20px; 
 
margin: 10px; 
 
background: #eee; 
 
color: #111; 
 
} 
 

 
input:checked + label{ 
 
background: #111; 
 
color: #fff; 
 
} 
 

 
div{ 
 
    background: #111; 
 
    color: #fff; 
 
    padding: 10px; 
 
    margin: 4px; 
 
} 
 

 
div span{ 
 
    display: block; 
 
    margin: 4px; 
 
} 
 

 
.title{ 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="a" type="radio" name="group1" value="Description group1 1" checked> 
 
<label for="a">Group1 Radio1</label> 
 
<input id="b" type="radio" name="group1" value="Description group1 2"> 
 
<label for="b">Group1 Radio2</label> 
 
<input id="c" type="radio" name="group1" value="Description group1 3"> 
 
<label for="c">Group1 Radio3</label> 
 

 

 
<input id="d" type="radio" name="group2" value="Description group2 1" checked> 
 
<label for="d">Group2 Radio1</label> 
 
<input id="e" type="radio" name="group2" value="Description group2 2"> 
 
<label for="e">Group2 Radio2</label> 
 
<input id="f" type="radio" name="group2" value="Description group2 3"> 
 
<label for="f">Group2 Radio3</label> 
 

 
<!-- Output value here --> 
 
<div id="group1"> 
 
<span class="title">Group1</span> 
 
<span class="selected"></span> 
 
</div> 
 

 
<div id="group2"> 
 
<span class="title">Group2</span> 
 
<span class="selected"></span> 
 
</div>

Quelle

2016-10-04 16:22:00

Wie gebe ich den Wert eines aktivierten Optionsfelds aus?

Antwort

Verwandte Themen