如何輸出選中的單選按鈕的值？

如何獲取選中的單選按鈕的值並將其輸出到相應的元素中？如何輸出選中的單選按鈕的值？

我'遇到麻煩，因爲我喜歡加載頁面加載時選中的單選按鈕的值。

預先感謝您！

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>

來源

2016-10-04 Arthur S.

你已經有JS了嗎？還是你想要一個教程？在這兩種情況下先嚐試搜索：http://stackoverflow.com/questions/8622336/jquery-get-value-of-selected-radio-button – mwoelk

您可以使用更改事件：

$(':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>

來源

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>

來源

2016-10-04 16:22:00

如何輸出選中的單選按鈕的值？

回答

相關問題