Javascript - RadioButton,onClick 不切换复选框仅使用 native JS

标签 javascript html checkbox radio-button

edit: 联系教授;我不是实际上 [应该] 在此作业上使用 jQuery,因为表单上的操作(例如教授的网站)不允许这样做。 Tyvm 感谢所有回复如此迅速和乐于助人的人。因此,我对纯原生 JS 解决方案很感兴趣。解决这些困难:

根据用户在面向 DOM 的表单中单击"is"或“否”单选按钮,获取一组复选框以切换“打开或关闭”。这是(I:单选按钮,II:复选框)的 HTML:

我:) 单选按钮

<label> Subscribe to our Mailing List? </label>
   <input type="radio" name="raydeo" id="rad1" value="Yes" onclick="subscribe()"></input> 
        <label>Yes</label>
   <input type="radio" name="raydeo" id="rad2" value="No" onclick="subscribe()"></input> 
        <label>No</label>

II.) 复选框

<fieldset>
    <legend>Mailing List Subscriptions</legend>
    <br />
    <input type="checkbox" name="mailinglist" value="Corporate Press Release Emails" id="cor"></input><label> Corporate Press Release Emails</label>
    <br />
    <input type="checkbox" name="mailinglist" value="Upgrade Software Advertising List" id="sof"></input><label> Upgrade Software Advertising List</label>
    <br />
    <input type="checkbox" name="mailinglist" value="List given to spammers after buyout" id="lspa"></input><label> List given to spammers after buyout</label>
    <br />
    <input type="checkbox" name="mailinglist" value="The only non-cynical list" id="cyn"></input><label> The only non-cynical list</label>
    <br />
    <input type="checkbox" name="mailinglist" value="List to sell to spammers" id="tos"></input><label> List to sell to spammers</label>
    <br />
    <input type="checkbox" name="mailinglist" value="Spam List" id="spal"></input><label> Spam List</label>
    <br />
        </fieldset>

使用帖子中提供的基本原理,例如 Populating Checkboxes Based on Radio Button Click ,它仍然使用 jQuery,到目前为止我所做的最佳尝试是:

<script>
function subscribe(){
  //var yesPlease = document.getElementById("rad1");
  //var noThx = document.getElementById("rad2");
   var arr = new Array["cor", "sof", "lspa", "cyn", "tos", "spal"];
     //var hold = document.getElementById(arr[i]);
     //if(hold.getAttribute(arr[i]).checked = true && arr[i] >= 1){
     //document.getElementById("cor").innerHTML=hold.getAttribute("checked");
    var hold = document.getElementsByName("mailinglist")[0];

    for(var i = 0; i < arr.length; i++)
    {
      if(document.getElementById("rad1").checked==true)
      {
          hold.getAttribute(arr[i]).checked == true;
      }
        else if(document.getElementById("rad2").checked==true)
        {
            hold.getAttribute(arr[i]).checked == false;
        }
    }
}
</script>

当我加载文档并单击其中任何一个时,没有任何反应。如果对您有帮助,这里是相关部分的屏幕截图:谢谢:

Mailing List Subscriptions

最佳答案

删除内联 javascript 代码并尝试在 js 文件本身中附加事件..

试试这个

$('#rad1,#rad2').on('click', function() {
        $('fieldset input[type="checkbox"]')
                               .prop('checked',this.value === 'Yes');
    }
});

Check Fiddle

关于Javascript - RadioButton,onClick 不切换复选框仅使用 native JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13718329/

相关文章:

javascript - 如何在域的所有页面上运行javascript脚本?

javascript - 当一切都来自本地主机时的跨源对象

html - Webkit - 使用 css 转换时文本变得不清晰(翻译)

javascript - 防止页面产生更多对话

javascript - 无法在 Material UI 中选中循环中的复选框

javascript - 使用复选框更改行和列的字体颜色

javascript - 即 : Undocumented "cache" attribute defined for input elements?

javascript - while 循环中的 setTimeout 使我的浏览器崩溃

javascript - 根据 JavaScript 变量值选择 HTML 选择字段?

javascript - 用于生成意外结果的 jQuery 页面的 CSS