javascript - 通过使用 jquery 检查选​​中哪个单选按钮来执行事件

标签 javascript jquery html

我需要根据选中的单选按钮显示不同的 div。我已经通过使用更改事件方法完成了它。但是我需要在加载页面时通过查看选中的按钮来完成它。

$('#id_radio1').click(function () {
    $('#div2').hide('fast');
    $('#div1').show('fast');
});

单选按钮是

<div class="col-md-4">       
     <label>
     <input type="radio" name="sublink" id="id_radio2" value="0" <?php if($announcements_details['detail_type']=="0") echo' checked="checked"'?> >&nbsp;Add attachment to title</input>
    </label>
</div>
<div class="col-md-4">      
    <label>     
        <input type="radio" name="sublink" id="id_radio1"  value="1" <?php if($announcements_details['detail_type']=="1") echo' checked="checked"'?> >&nbsp;Add new sublinks</input>
    </label>
</div>
<div class="col-md-4">      
    <label>             
        <input type="radio" name="sublink" id="id_radio3" value="2" <?php if($announcements_details['detail_type']=="2") echo' checked="checked"'?>>&nbsp;None
    </label>
</div>

帮我解决这个问题

最佳答案

JS 查询

在页面加载时检查 radio 。

$("input[name=sublink]").each(function(index, elem){
 if($(this).prop("checked")){

    console.log("radio (with checked) has value: "+elem.value);

    if(elem.value == "0"){
        // LOGIC FOR SHOW/HIDE DIV HERE
    } else if(elem.value == "1"){
        // LOGIC FOR SHOW/HIDE DIV HERE
    } else if(elem.value == "2"){
        // LOGIC FOR SHOW/HIDE DIV HERE
    }
 }
});

.....

如果你需要这个。单击输入 radio 时检查 radio 。

$("input[name=sublink]").on("change", function(){
 switch(this.value){
 case "0":
 console.log("radio with value 0");
 // LOGIC FOR SHOW/HIDE DIV HERE
 break;
 case "1":
 console.log("radio with value 1");
 // LOGIC FOR SHOW/HIDE DIV HERE
 break;
 case "2":
 console.log("radio with value 2");
 // LOGIC FOR SHOW/HIDE DIV HERE
 break;
 default:
 console.log("default");
 }
});

关于javascript - 通过使用 jquery 检查选​​中哪个单选按钮来执行事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41563704/

相关文章:

javascript - 为什么 jQuery 源代码在其余代码之前关闭?

javascript - 如何在 js 或 css 中固定图像位置?我有摩天轮 我希望我所有的图像在旋转时都应该站立

javascript - Jquery UI Datepicker - 如何使用 jquery/javascript 突出显示多个日期 bgcolor

jquery - 从JSP中的下拉列表中获取值

javascript - 淡入前瞬间闪烁页面

javascript - 为什么设置 "No license field": true in your package. json 时 "private"警告消失

javascript - 选择具有不同字体系列的列表选项 - 如何做到这一点?

javascript - 如果隐藏另一个 div,则 div 宽度调整为 100%

jquery - 在输入焦点/模糊上删除/添加 CSS 类

html - 更改组合框样式