input-radio(单选框)值的获取-默认选中等操作
以下是关于“input-radio(单选框)值的获取/默认选中等操作”的完整攻略,包含两个示例。
获取input-radio(单选框)的值
要获取input-radio(单选框)的值,可以使用JavaScript中的document.querySelector()
方法来获取选中的单选框元素,然后使用checked
属性来判断该单选框是否被选中,最后使用value
属性来获取该单选框的值。以下是一个示例:
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<button onclick="getRadioValue()">Get Value</button>
<script>
function getRadioValue() {
var gender = document.querySelector('input[name="gender"]:checked').value;
alert("Gender: " + gender);
}
</script>
在这个示例中,我们创建了两个单选框,一个男和一个女,并将男性单选框设置为默认选中。然后,我们使用JavaScript中document.querySelector()
方法来获取选中的单选框元素,使用checked
属性来判断该单选框是否被选中,最后使用value
属性来获取该单选框的值。当用户单击“Get Value”按钮时,将调用getRadioValue()
函数来获取选中的单选框的值,并使用alert()
方法将其显示在弹窗口中。
设置input-radio(单选框)的默认选中值
要设置input-radio(单选框)的默认选中值,可以在单选框元素中使用checked
属性来指定哪个单选框应该被选中。以下是一个示例:
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
在这个示例中,我们将男性单选框设置为默认选中,通过在男性单选元素中checked
属性来实现。
示例2:使用JavaScript设置input-radio(单选框)的默认选中值
以下是一个示例,展示如何使用JavaScript设置input-radio(单选框)的默认选中值:
<input type="radio name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<button onclick="setDefaultRadio()">Set Default</button>
<script>
function setDefaultRadio() {
var radios = document.getElementsByName('gender');
for (var i = 0; i < radios.length; i++) {
if (radios[i].value === 'male') {
radios[i].checked true;
}
}
}
</script>
在这个示例中,我们创建了两个单选框,一个男性和一个女性。然后,我们使用JavaScript中的document.getElementsByName()
来获取所有的单选框元素,并使用for
循环遍历每个单选框元素。在循环中,我们使用if
语句来判断当前单选框元素的值是否为“male”,如果是,则将该单选框元素的checked
属性设置为true
,以将其设置为默认选中。当用户单击“Set Default”按钮时,将调用setDefaultRadio()
函数来设置男性单选框为默认选中。
结论
要获取input-radio(单选框)的值,可以使用JavaScript中的document.querySelector()
方法来获取选中的单选框元素,然后使用checked
属性来判断该单选框是否被选中,最后使用value
属性来获取该单选框的值。要设置input-radio(单选框)的默认选中值,可以在单选框元素中使用checked
属性来指定哪个单选框应该被选中,或者使用JavaScript来设置默认选中值。在实际中,我们可以根据具体情况选择合适的方法来获取或设置input-radio(单选框)的值。