0

I am having an issue creating two sets of check boxes that act independently of each other. Checking off any of the options aside from N/A should cause an input field to appear below each set. However, the second set of check boxes only produce an input field when I check off one of the options from the first set followed by N/A (Set to make the input field disappear.) How can I condense the script below and make it fully functional?

function checkChecked (){
  if($(".needID").is(':checked')) {
    $('.hideOnLoad').show().focus();
    $( ".selectNone" ).prop( "checked", false );

  }
  else {$('.hideOnLoad').val("").hide();}

  if($(".needID2").is(':checked')) {
    $('.hideOnLoad2').show().focus();
    $( ".selectNone2" ).prop( "checked", false );

  }
  else {$('.hideOnLoad2').val("").hide();}
}

$( "input.needID").on("click", checkChecked );
$( "input.selectNone" ).on("click", function() {
  if($(".selectNone").is(':checked')) {
    $( ".needID" ).prop( "checked", false );
    checkChecked ();
  }

  $( "input.needID2").on("click", checkChecked );
  $( "input.selectNone2" ).on("click", function() {
    if($(".selectNone2").is(':checked')) {
      $( ".needID2" ).prop( "checked", false );
      checkChecked ();
    }   

  });

});
checkChecked ();

https://jsfiddle.net/of0h2c17/1/

1 Answer 1

1

You're not properly closing this:

$( "input.selectNone" ).on("click", function() {

Therefore, the next click function is wrapped inside it.

Fixed demo

Good code formatting saves many headaches. The JSfiddle TidyUp button makes it immediately clear what the problem is.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.