Fatal编程技术网
  • javascript/
  • Javascript-RadioButton，onClick不使用本机JS切换复选框

Javascript-RadioButton，onClick不使用本机JS切换复选框

javascript html checkbox

Javascript-RadioButton，onClick不使用本机JS切换复选框,javascript,html,checkbox,radio-button,Javascript,Html,Checkbox,Radio Button,编辑：联系教授；我实际上不应该在这个作业中使用jQuery，因为表单上的操作（例如，教授的网站）不允许使用jQuery。感谢所有回复如此迅速和有帮助的人。因此，我感兴趣的是一个纯本地JS解决方案。来解决这些困难： 获取一组复选框，根据用户在面向DOM的表单中单击“是”或“否”单选按钮来切换“开”或“关”。以下是（I：单选按钮，II：复选框）的HTML： I:）单选按钮 <label> Subscribe to our Mailing List? </label> &

编辑：联系教授；我实际上不应该在这个作业中使用jQuery，因为表单上的操作（例如，教授的网站）不允许使用jQuery。感谢所有回复如此迅速和有帮助的人。因此，我感兴趣的是一个纯本地JS解决方案。来解决这些困难：

获取一组复选框，根据用户在面向DOM的表单中单击“是”或“否”单选按钮来切换“开”或“关”。以下是（I：单选按钮，II：复选框）的HTML：

I:）单选按钮

<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>

订阅我们的邮件列表？
对
不
二、 ）复选框

<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>


邮件列表订阅


公司新闻稿电子邮件


升级软件广告列表


收购后向垃圾邮件发送者提供的名单


唯一不愤世嫉俗的名单


向垃圾邮件发送者出售的列表


垃圾邮件列表
使用诸如（仍然使用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>


函数subscribe（）{
//var yesplese=document.getElementById（“rad1”）；
//var noThx=document.getElementById（“rad2”）；
var arr=新数组[“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（“选中”）；
var hold=document.getElementsByName（“邮件列表”）[0]；
对于（变量i=0；i
当我加载文档并单击其中任何一个时，都不会发生任何事情。以下是相关部分的屏幕截图（如果有帮助）：谢谢：

删除内联javascript代码，并尝试将事件附加到js文件本身

试试这个

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

单击单选按钮时，您需要创建一个操作处理程序。这样，元素属性“checked”在单击时会正确更新

下面的代码是从您的代码中编辑出来的，只在所有输入类型的收音机上包含click处理程序

$(document).ready(function(){
function subscribe() {
    $('input[type="radio"]').click(function(){
        var yesPlease = document.getElementById("rad1");
        var noThx = document.getElementById("rad2");
        if(yesPlease.checked == true){
            //check all boxes
            $("#cor").prop("checked", true);
            $("#sof").prop("checked", true);
            $("#lspa").prop("checked", true);
            $("#cyn").prop("checked", true);
            $("#tos").prop("checked", true);
            $("#spal").prop("checked", true);
        }
        else if(noThx.checked == true) {
            //uncheck all boxes
            $("#cor").prop("checked", false);
            $("#sof").prop("checked", false);
            $("#lspa").prop("checked", false);
            $("#cyn").prop("checked", false);
            $("#tos").prop("checked", false);
            $("#spal").prop("checked", false);
        }
    });
}
subscribe();
​});​
JSFIDLE:

您的代码运行得非常好：-请参见此处：-
我能想象的唯一问题

  • 您是否在页面中包含jquery
  • 您将JS函数放置在何处
    • 如果将值从no wrap（body）更改为 onDomReady或onLoad无法工作

    function subscribe() {
    var yesPlease = document.getElementById("rad1");
    var noThx = document.getElementById("rad2");
    if(yesPlease.checked){
    //check all boxes
    $("#cor").prop("checked", true);
    $("#sof").prop("checked", true);
    $("#lspa").prop("checked", true);
    $("#cyn").prop("checked", true);
    $("#tos").prop("checked", true);
    $("#spal").prop("checked", true);
}
else if(noThx.checked) {
    //uncheck all boxes
    $("#cor").prop("checked", false);
    $("#sof").prop("checked", false);
    $("#lspa").prop("checked", false);
    $("#cyn").prop("checked", false);
    $("#tos").prop("checked", false);
    $("#spal").prop("checked", false);
}
}
    ​

    这个简单的代码将解决这个问题

    标题中的JavaScript部分：

    $(document).ready(function(){ 

    $(".radio-button").click(function(){

        if($(this).val() == "No")
            $(".checkbox-list input").attr("disabled", true);
        else
            $(".checkbox-list input").attr("disabled", false);

    });

})

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

<fieldset class="checkbox-list">
    <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>

    /* Solution - 2 */
function subscribe(ele)
{

    if(ele == "No")
            $(".checkbox-list input").attr("disabled", true);
    else
            $(".checkbox-list input").attr("disabled", false);


}

    <label> Subscribe to our Mailing List? </label>
<input type="radio" name="raydeo" id="rad1" value="Yes" onclick="subscribe(this.value)" class="radio-button"></input><label> Yes</label>
<input type="radio" name="raydeo" id="rad2" value="No" onclick="subscribe(this.value)" class="radio-button"></input><label> No</label>
    还要在上述代码之前添加jquery库CDN源代码。

    正文部分中的标记：

    $(document).ready(function(){ 

    $(".radio-button").click(function(){

        if($(this).val() == "No")
            $(".checkbox-list input").attr("disabled", true);
        else
            $(".checkbox-list input").attr("disabled", false);

    });

})

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

<fieldset class="checkbox-list">
    <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>

    /* Solution - 2 */
function subscribe(ele)
{

    if(ele == "No")
            $(".checkbox-list input").attr("disabled", true);
    else
            $(".checkbox-list input").attr("disabled", false);


}

    <label> Subscribe to our Mailing List? </label>
<input type="radio" name="raydeo" id="rad1" value="Yes" onclick="subscribe(this.value)" class="radio-button"></input><label> Yes</label>
<input type="radio" name="raydeo" id="rad2" value="No" onclick="subscribe(this.value)" class="radio-button"></input><label> No</label>
    还要在上述代码之前添加jquery库CDN源代码。

    正文部分中标记的变化：

    $(document).ready(function(){ 

    $(".radio-button").click(function(){

        if($(this).val() == "No")
            $(".checkbox-list input").attr("disabled", true);
        else
            $(".checkbox-list input").attr("disabled", false);

    });

})

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

<fieldset class="checkbox-list">
    <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>

    /* Solution - 2 */
function subscribe(ele)
{

    if(ele == "No")
            $(".checkbox-list input").attr("disabled", true);
    else
            $(".checkbox-list input").attr("disabled", false);


}

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

    订阅我们的邮件列表？
对
不
    仅使用（yesPlease.checked）而不是（yesPlease.checked==true），因为单选按钮是check-return布尔值。这不是问题，但是
    $（'input[type=“checkbox”][name=“mailinglist”]'）。prop（“checked”，true）；
    将在一行中完成所有复选框…+1以更改选择器，尽管通过
    name
    属性选择可能更好。此外，您还可以删除if/else:
    $（'fieldset input[type=“checkbox”]'）.prop（'checked'，this.value=='Yes'）；
    @Pranav最初我将所有内容嵌入到html文档中（formval.html），之前下载了jQuery 1.8.3（jQuery.js）并保存到我的文件夹（'fv'），之后我立即调用了脚本，如下所示：$（document）.ready（function（）{//代码目前在这里…，…但它只是…不起作用：（请在头脑中加入jquery，并输入JS脚本，然后尝试…@Pranav请参阅更新；jquery实际上不接受此任务：教授的表单操作参数。非常感谢你，Pranav，感谢你对此事的关注。不过我需要一个JS唯一的解决方案：/@Calvin:谢谢你的帮助和建议；结果是不允许使用jQuery来处理这个问题，但我已经解决了。尽管如此，还是要感谢Calvin、Pranav、NullPointer和Sushanth的指导。