【问题标题】:Why javascript not working on checkbox?为什么javascript不能在复选框上工作?
【发布时间】:2012-06-08 15:22:39
【问题描述】:

我有两组复选框,当我单击第一组复选框时,应取消选中第二组复选框。 但是当我两次单击第一个复选框时,第二个复选框未选中。 这是我的javascript代码

 <script>
            function uncheck0(){
                for(var ii=1; ii<=3; ii++){
                    if(document.getElementById("q6_"+ii).checked==true){
                       document.getElementById("q6_"+ii).checked=false;
                    }
                }
            }
            function uncheck(id, from, to){
                for(var ii=from; ii<=to; ii++){
                    if(document.getElementById(id+ii).checked==true){
                       document.getElementById(id+ii).checked=false;
                    }
                }
            }
        </script>

这是我的html代码第一组有单选按钮,第二组有复选框

<p>IF YES: When will the review begin?</p>
            <label  for="q6"><input type="radio" class="styled" value="Within the next 12 months" name="q6[]" id="q6_1">Within the next 12 months</label>
            <label  for="q6"><input type="radio" class="styled" value="Within the next 24 months" name="q6[]" id="q6_2">Within the next 24 months</label>
            <label  for="q6"><input type="radio" class="styled" value="We are currently doing it" name="q6[]" id="q6_3">We are currently doing it</label><br>
        <br>
        <p>IF NO: Why Not</p>
            <label onclick="uncheck('q6_',1,3);" for="q6"><input type="checkbox" class="styled" value="Lack of budget" name="q6[]" id="q6_4">Lack of budget</label>
            <label onclick="uncheck('q6_',1,3);" for="q6"><input type="checkbox" class="styled" value="Lack of resource" name="q6[]" id="q6_5">Lack of resource</label>
            <label onclick="uncheck('q6_',1,3);" for="q6"><input type="checkbox" class="styled" value="Do not see the need" name="q6[]" id="q6_6">Do not see the need</label>
            <label onclick="uncheck('q6_',1,3);" for="q6"><input type="checkbox" class="styled" value="Lack of know how/expertise" name="q6[]" id="q6_7">Lack of know how/expertise</label>
            <label onclick="uncheck('q6_',1,3);" for="q6"><input type="checkbox" class="styled" value="Complexity" name="q6[]" id="q6_8">Complexity</label>
            <label onclick="uncheck('q6_',1,3);" for="q6"><input type="checkbox" class="styled" value="Contractual obligations" name="q6[]" id="q6_9">Contractual obligations</label>
            <label onclick="uncheck('q6_',1,3);" for="q5"><input type="checkbox" class="styled" value="Other" name="q6[]" id="q6_10">Other </label>
            <label onclick="uncheck('q6_',1,3);" for="q5a">Please state</label><input type="text" value="" id="q6a" name="q6a">

我使用了一个 javascript 文件“custom-form-element.js”来进行复选框和单选框样式

【问题讨论】:

  • 我可能是错的,但我认为这不是您定义复选框和收音机名称的方式。所有分组的单选按钮应具有相同的名称,并且所有复选框应具有不同的名称 - 我不认为使用 [] 实际上将它们分配给数组。
  • 另外,为什么你把函数调用放在标签onclick上,而不是复选框本身。你点击那个,而不是标签。
  • 名称不是问题我通过 ID 获得单选按钮和复选框
  • 但这不是正确的做法:w3schools.com/html/html_forms.asp

标签: javascript html radio-button checkbox


【解决方案1】:

onclick="uncheck('q6_',1,3);" 从标签移动到输入框。
您的最终代码应类似于:

<label for="q6">
    <input type="checkbox" onclick="uncheck('q6',1,3);" class="styled" value="Lack of budget" name="q6[]" id="q6_1">Lack of budget</label>
<label onclick="uncheck('q6_',1,3);" for="q6_2"><input type="checkbox" class="styled" value="Lack of resource" name="q6[]" id="q6">Lack of resource</label>

【讨论】:

    【解决方案2】:

    你需要有一个默认的“检查”值

     <input type="checkbox" checked="true">
    

    否则,您的代码会认为它未选中,然后将值设置为“选中”,然后第二次单击将“取消选中”它。

    【讨论】:

    • 其实这是错误的,检查的属性没有值,它只存在与否。
    猜你喜欢
    • 1970-01-01
    • 2020-10-12
    • 1970-01-01
    • 2021-03-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-31
    • 1970-01-01
    相关资源
    最近更新 更多