As part of a web form, I have two checkboxes (both with the name "my_checkbox") and two input filelds (one with the name "input1" and the other named "input2").

<input type="checkbox" name="my_checkbox" value="some text" onclick="a function;    checkBoxValidate(0);">

<input type="checkbox" name="my_checkbox" value="some diffrent text" onclick="a diffrent function; checkBoxValidate(1);">

<input id="input1" name="input1"  />

<input id="input2" name="input2"  />

If user selects the first checkbox, input1 must not be empty. If user selects the second checkbox, input2 must not be empty. The two checkboxes must have the same name. Function checkBoxValidate assures the two checkboxes cannot be selected at the same time (I don't like radio buttons).

My javascript:

}else if (!document.myform.my_checkbox[0].checked && myform.input1.value == ''){ 
alert ('Please enter some text!',function(){$(myform.input1).focus();}); 
return false;

}else if (!document.myform.my_checkbox[1].checked && myform.input2.value == ''){ 
alert ('Please enter some text!',function(){$(myform.input2).focus();}); 
return false;

Of course, nothing works! Please help? :)

As part of a web form, I have two checkboxes (both with the name "my_checkbox") and two input filelds (one with the name "input1" and the other named "input2").

<input type="checkbox" name="my_checkbox" value="some text" onclick="a function;    checkBoxValidate(0);">

<input type="checkbox" name="my_checkbox" value="some diffrent text" onclick="a diffrent function; checkBoxValidate(1);">

<input id="input1" name="input1"  />

<input id="input2" name="input2"  />

If user selects the first checkbox, input1 must not be empty. If user selects the second checkbox, input2 must not be empty. The two checkboxes must have the same name. Function checkBoxValidate assures the two checkboxes cannot be selected at the same time (I don't like radio buttons).

My javascript:

}else if (!document.myform.my_checkbox[0].checked && myform.input1.value == ''){ 
alert ('Please enter some text!',function(){$(myform.input1).focus();}); 
return false;

}else if (!document.myform.my_checkbox[1].checked && myform.input2.value == ''){ 
alert ('Please enter some text!',function(){$(myform.input2).focus();}); 
return false;

Of course, nothing works! Please help? :)

• javascript
• validation
• input
• checkbox

• what do you mean by the two checkboxes cannot be selected at the same time? – Kawinesh S K Commented Dec 7, 2013 at 9:16
• 3 post all of your js function, not only small part – doniyor Commented Dec 7, 2013 at 9:16
• 2 The alert() method displays an alert dialog with the optional specified content and an OK button. I didn't find any callback method. developer.mozilla/en-US/docs/Web/API/Window.alert – Krish R Commented Dec 7, 2013 at 9:19
• Also post more of your HTML, particularly the containing form, but more if it's relevant. – Jackson Ray Hamilton Commented Dec 7, 2013 at 9:19
• 3 "I do not like radio buttons" - that is plain silly. you want radio button functionality, use radio buttons – mplungjan Commented Dec 7, 2013 at 9:30

2 Answers 2

Seeing you might want to take this simple, I write it simple and use plain JS since you did not tag the question with jQuery.

Live Demo

window.onload=function() {
  var form1=document.getElementById("form1"); // assuming <form id="form1"
  form1.onsubmit=function() {
    if (this.my_checkbox[0].checked && this.input1.value=="") {
      alert("Please enter something in input 1");
      this.input1.focus();
      return false;
    }
    if (this.my_checkbox[1].checked && this.input2.value=="") {
      alert("Please enter something in input 2");
      this.input2.focus();
      return false;
    }
    return true; // allow submission
  }
  // if the checkboxes had different IDs this could have been one function
  form1.my_checkbox[0].onclick=function() {
    this.form.my_checkbox[1].checked=!this.checked;
  }
  form1.my_checkbox[1].onclick=function() {
    this.form.my_checkbox[0].checked=!this.checked;
  }
}

HMTL

<input type="text" id="textbox"/><br/>
<input type="checkbox" id="checkbox1" value="CB1"/><br/>
<input type="text" id="textbox1"/><br/>
<input type="checkbox" id="checkbox12"/>

JavaScript

$('#checkbox1').on('click',function(){
   var checked=$(this).is(':checked');
    if(checked==true)
    {   
        $('#textbox1').attr('disabled',true);
        $('#checkbox12').attr('checked', false);
        $('#textbox').attr('disabled',false);
        var text=$('#textbox').val();
        checktext(text)
    }
  });

$('#checkbox12').on('click',function(){
   var checked=$(this).is(':checked');
    if(checked==true)
    {   
        $('#textbox').attr('disabled',true);
        $('#checkbox1').attr('checked', false);
        $('#textbox1').attr('disabled',false);
        var text=$('#textbox1').val();
        checktext(text)
    }
  });

function checktext(text){
    alert(text);
    if(text=='')
        alert('Enter Text');
}

DEMO