检查是否选中了选项和复选框

时间:2016-08-15 10:47:06

标签: javascript html checkbox

我在这里使用javascript有些问题。 我希望有人选择一个选项和一个复选框,如果两个都被选中,那么其他复选框应该无法点击。 我曾尝试给函数2个参数(一个用于选项,一个用于复选框)。

function bs(id /*,chbxvalue */ )
{
    var selectElement = document.getElementById(id);
    var selectValue = selectElement.options[selectElement.selectedIndex].value;

    //var select2Element = document.getElementById(chbxvalue);
    //var selectCHBXval = select2Element.options[select2Element.selectedIndex].value;

    if((selectValue == "banana" ) /*&& (document.getElementById("apple").checked == true )*/ )
    {
        document.getElementById("juice").checked = true;
    }
    else if(selectValue == "Salad")
    {}
}

评论中的内容不起作用。

<div id="flavor"><br />
  <select id="bss" name="beh" onChange="bs('bss')">
     <option value="banana" >banana</option>
     <option value="pinapple" >pinapple</option>
  </select>
</div>

<div id="divcontainer" class="cont" style="display:block;">
       <input type="checkbox" name="app" id="apple" value="appl" />Apples <br />
       <input type="checkbox" name="juices" id="juice" value="fj" />Fruitjuice <br />
</div>

我在这里更改了名字。有人有想法吗?对不起,我对javascript不太好....

2 个答案:

答案 0 :(得分:0)

听起来你只想使用

document.getElementById("...").disabled=true;

或者,如果您想一次禁用更多复选框,请为其指定一个类,然后使用

elements = document.getElementsByClassName("my_class");
for(var i = 0; i < elements.length; ++i)
{elements[i].disabled = "true"; }

答案 1 :(得分:0)

我不确定这是否是你所追求的,但似乎你想要某种条件逻辑。我做了一个小提琴来说明它:https://jsfiddle.net/75uLereo/

var radios = document.myform.type,
    select = document.myform.flavor;

for(var i = 0; i < radios.length; i++){
    radios[i].addEventListener('change', checkValues);
}

select.addEventListener('change', checkValues);


function checkValues(){
    var select = document.myform.flavor,
    selectedValue = select.options[select.selectedIndex].value,
    radioValue = document.querySelector('input[name = "type"]:checked').value;

    if(radioValue !== "undefined"){    
      switch(selectedValue){
        case 'none':
        case 'banana':
        case 'strawberry':
            alert("This is "+selectedValue+" and "+radioValue+". Do some conditional logic with the values!");
          break;
        default:
        break;
      }
   }

}

这会绑定一个函数来改变单选按钮和选择上的事件,然后使用不同值的开关来做你想做的任何事情。

<强>更新

我做了另一个例子,如果选中了复选框和复选框中的bool值

https://jsfiddle.net/75uLereo/2/