Javascript 在html中预定义jquery变量

我试图从预先选择的无线组中进行选择，并在页面加载时将其属性设置为jquery变量。我想有这个电台预选通过html最初

HTML:

这个jquery完全正确，只要单击div，它就会将全局变量“var”设置为数据值

但是，如果未单击任何内容，则变量为“未定义”。我将类“selected”添加到第三个选项中，但它只将css样式应用于选择，它没有像我希望的那样将变量val设置为“option3”

总之，我只想在html中添加类“selected”的radio，以便为“val”变量设置元素数据值

非常感谢

Edit1:

---

此外，我希望预先选择的变量能够重置回。例如，如果最初设置为option3，则用户单击Option4，很棒，但随后单击on.mouseleaves函数，使变量返回到预选的“option3”。我需要在不直接在jquery中以option3为目标的情况下实现这一点，只需要有一个将变量“重置”为预选选项的事件

现在，这应该可以：

$(document).ready(function(){
    var val = $('.selected').attr('data-value')

    // rest of jquery code..
})

上面的代码没有定义变量的原因是，只有在单击

.radio

div时才会触发该变量

编辑：

为了回应你的编辑，我会这样做。注：通过id标识每个无线电分区：

<div style="background-color:blue;" id='radio-option-1' class="radio" data-value="option1"></div>
<div style="background-color:green;" id='radio-option-2' class="radio" data-value="option2"></div>
<div style="background-color:black;" id='radio-option-3' class="radio selected" data-value="option3"  checked="checked" ></div>
<div style="background-color:orange;" id='radio-option-4' class="radio"  data-value="option4"></div>

<script>
$(document).ready(function(){
    var initial_val = $('.selected').attr('data-value')
    var val = initial_val
    var initial_id = $('.selected').attr('id') //now you know what the initial value was.

    $('.radio').on('click', function() {
        /*$('.selected').removeClass('selected');*/
        $(this).addClass('selected');

         val = $(this).attr('data-value');
    });

    //then some jquery event
    $('.radio').on('mouseleave',function(){
        val = initial_val
    })

    // rest of jquery code..
})
</script>

$（文档）.ready（函数（）{
var initial_val=$（'.selected'）.attr（'data-value'））
var val=初始值
var initial_id=$（'.selected'）.attr（'id'）//现在您知道初始值是什么了。
$（'.radio'）。在（'click'，function（）上{
/*$（'.selected'）.removeClass（'selected'）*/
$（this.addClass（'selected'）；
val=$（this.attr（'data-value'）；
});
//然后是一些jquery事件
$（'.radio'）.on（'mouseleave'，function（）{
val=初始值
})
//jquery代码的其余部分。。
})

您要做的是为注册一个事件处理程序，然后以相同的方式获取所有单选按钮以在其上注册一个事件处理程序。您将要获取所有选中了

属性的单选按钮（在这种情况下，页面加载中将始终只有一个具有该属性）并将其
data value
属性的值设置为全局变量
val
，方法与您在示例中单击其中一个单选按钮时所做的相同

$(document).ready(function() {
    val = $('radio.selected').attr('data-value');
});

^假设您已经在全局范围内定义了
val

我希望这会对您有所帮助。
您是如何让“编辑1”问题发挥作用的？
<div style="background-color:blue;" id='radio-option-1' class="radio" data-value="option1"></div>
<div style="background-color:green;" id='radio-option-2' class="radio" data-value="option2"></div>
<div style="background-color:black;" id='radio-option-3' class="radio selected" data-value="option3"  checked="checked" ></div>
<div style="background-color:orange;" id='radio-option-4' class="radio"  data-value="option4"></div>

<script>
$(document).ready(function(){
    var initial_val = $('.selected').attr('data-value')
    var val = initial_val
    var initial_id = $('.selected').attr('id') //now you know what the initial value was.

    $('.radio').on('click', function() {
        /*$('.selected').removeClass('selected');*/
        $(this).addClass('selected');

         val = $(this).attr('data-value');
    });

    //then some jquery event
    $('.radio').on('mouseleave',function(){
        val = initial_val
    })

    // rest of jquery code..
})
</script>

$(document).ready(function() {
    val = $('radio.selected').attr('data-value');
});