CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Kiran Shahi
Kiran Shahi

Reputation: 7970

Show textarea of checked chekbox only and hide when unchecked

I want to show textarea only when checkbox is checked and hide when the checkbox is unchecked. But my current code display all the textarea when certain checkbox is checked. textarea and checkbox are dynamically generated, so there can be any number of checkbox and textarea.

Basically, what I want to do is toggle the textarea on checkbox event.

$( document ).ready(function() {
	$(".with-us").hide();
    $(".with-other").hide();
    $('textarea[name="shopDescription"]').hide();
    $("#work-option :radio").change(function () {
    	var workType = $('input[name=work]:checked').val();
        if (workType == "wc") {
        	$(".with-other").hide();
            $(".with-us").show();
        } else if (workType == "woc") {
            $(".with-us").hide();
            $(".with-other").show();
        } else {
            $(".with-us").hide();
            $(".with-other").hide();
        }
    });
	$(document).on('click', 'input[name="shop"]', function () {
    	if (this.checked) {
        	$('textarea[name="shopDescription"]').show();
        } else {
        	$('textarea[name="shopDescription"]').hide();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="work-option">
        <label>Show your work: </label>
        <div class="options">
            <input type="radio" name="work" value="wc">
            With us
		    <input type="radio" name="work" value="woc">
            With other
        </div>
    </div>
    <div class="with-us">
        <input type="hidden" name="withus" id="withus">
        <input id="work1" type="checkbox" name="shop" value="test1">
        Work 1
        <textarea id="test1Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work2" type="checkbox" name="shop" value="test2">
        Work 2
        <textarea id="test2Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work3" type="checkbox" name="shop" value="test3">
        Work 3
        <textarea id="test3Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work4" type="checkbox" name="shop" value="test4">
        Work 4
        <textarea id="test4Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work5" type="checkbox" name="shop" value="test5">
        Work 5
        <textarea id="test5Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work6" type="checkbox" name="shop" value="test6">
        Work 6
        <textarea id="test6Description" placeholder="Description" name="shopDescription"></textarea>
    </div>
    <div class="with-other">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

Upvotes: 0

Views: 958

Answers (4)

SilverSurfer
SilverSurfer

Reputation: 4365

Try this:

$( document ).ready(function() {
	$(".with-us").hide();
    $(".with-other").hide();
    $('textarea[name="shopDescription"]').hide();
    $("#work-option :radio").change(function () {
    	var workType = $('input[name=work]:checked').val();
        if (workType == "wc") {
        	$(".with-other").hide();
            $(".with-us").show();
        } else if (workType == "woc") {
            $(".with-us").hide();
            $(".with-other").show();
        } else {
            $(".with-us").hide();
            $(".with-other").hide();
        }
    });
	$(document).on('click', 'input[name="shop"]', function () {
  if($(this).is(':checked')) {  
        	$(this).next().show();
        } else {
        	$(this).next().hide();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="work-option">
        <label>Show your work: </label>
        <div class="options">
            <input type="radio" name="work" value="wc">
            With us
		    <input type="radio" name="work" value="woc">
            With other
        </div>
    </div>
    <div class="with-us">
        <input type="hidden" name="withus" id="withus">
        <input id="work1" type="checkbox" name="shop" value="test1">
        Work 1
        <textarea id="test1Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work2" type="checkbox" name="shop" value="test2">
        Work 2
        <textarea id="test2Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work3" type="checkbox" name="shop" value="test3">
        Work 3
        <textarea id="test3Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work4" type="checkbox" name="shop" value="test4">
        Work 4
        <textarea id="test4Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work5" type="checkbox" name="shop" value="test5">
        Work 5
        <textarea id="test5Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work6" type="checkbox" name="shop" value="test6">
        Work 6
        <textarea id="test6Description" placeholder="Description" name="shopDescription"></textarea>
    </div>
    <div class="with-other">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

Upvotes: 1

Walk
Walk

Reputation: 757

How about a CSS solution?

textarea {
  display: none;
}

input[type="checkbox"]:checked +textarea {
  display: block;
}


$( document ).ready(function() {
	$(".with-us").hide();
    $(".with-other").hide();
    $("#work-option :radio").change(function () {
    	var workType = $('input[name=work]:checked').val();
        if (workType == "wc") {
        	$(".with-other").hide();
            $(".with-us").show();
        } else if (workType == "woc") {
            $(".with-us").hide();
            $(".with-other").show();
        } else {
            $(".with-us").hide();
            $(".with-other").hide();
        }
    });
});
textarea {
  display: none;
}

input[type="checkbox"]:checked +textarea {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="work-option">
        <label>Show your work: </label>
        <div class="options">
            <input type="radio" name="work" value="wc">
            With us
		    <input type="radio" name="work" value="woc">
            With other
        </div>
    </div>
    <div class="with-us">
        <input type="hidden" name="withus" id="withus">
        <input id="work1" type="checkbox" name="shop" value="test1">
        Work 1
        <textarea id="test1Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work2" type="checkbox" name="shop" value="test2">
        Work 2
        <textarea id="test2Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work3" type="checkbox" name="shop" value="test3">
        Work 3
        <textarea id="test3Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work4" type="checkbox" name="shop" value="test4">
        Work 4
        <textarea id="test4Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work5" type="checkbox" name="shop" value="test5">
        Work 5
        <textarea id="test5Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work6" type="checkbox" name="shop" value="test6">
        Work 6
        <textarea id="test6Description" placeholder="Description" name="shopDescription"></textarea>
    </div>
    <div class="with-other">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

Upvotes: 1

Pankaj Makwana
Pankaj Makwana

Reputation: 3050

Below code will help you to show/hide textbox This code will get show/hide textarea next to checkbox

    if (this.checked) {
        $(this).next("textarea").show();
    } else {
        $(this).next("textarea").hide();
    }


$( document ).ready(function() {
	$(".with-us").hide();
    $(".with-other").hide();
    $('textarea[name="shopDescription"]').hide();
    $("#work-option :radio").change(function () {
    	var workType = $('input[name=work]:checked').val();
        if (workType == "wc") {
        	$(".with-other").hide();
            $(".with-us").show();
        } else if (workType == "woc") {
            $(".with-us").hide();
            $(".with-other").show();
        } else {
            $(".with-us").hide();
            $(".with-other").hide();
        }
    });
	$(document).on('click', 'input[name="shop"]', function () {
    	if (this.checked) {
        	$(this).next("textarea").show();
        } else {
        	$(this).next("textarea").hide();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="work-option">
        <label>Show your work: </label>
        <div class="options">
            <input type="radio" name="work" value="wc">
            With us
		    <input type="radio" name="work" value="woc">
            With other
        </div>
    </div>
    <div class="with-us">
        <input type="hidden" name="withus" id="withus">
        <input id="work1" type="checkbox" name="shop" value="test1">
        Work 1
        <textarea id="test1Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work2" type="checkbox" name="shop" value="test2">
        Work 2
        <textarea id="test2Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work3" type="checkbox" name="shop" value="test3">
        Work 3
        <textarea id="test3Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work4" type="checkbox" name="shop" value="test4">
        Work 4
        <textarea id="test4Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work5" type="checkbox" name="shop" value="test5">
        Work 5
        <textarea id="test5Description" placeholder="Description" name="shopDescription"></textarea>

        <input id="work6" type="checkbox" name="shop" value="test6">
        Work 6
        <textarea id="test6Description" placeholder="Description" name="shopDescription"></textarea>
    </div>
    <div class="with-other">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

You are showing/hiding all textarea not beside that checkbox. to get next element to the current element, you have to use next() method to get immediate next element.

Upvotes: 1

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

The selector $('textarea[name="shopDescription"]').hide(); selects all textarea's.
Instead search for the next() textarea:

$(document).ready(function() {
  $(".with-us").hide();
  $(".with-other").hide();
  $('textarea[name="shopDescription"]').hide();
  $("#work-option :radio").change(function() {
    var workType = $('input[name=work]:checked').val();
    if (workType == "wc") {
      $(".with-other").hide();
      $(".with-us").show();
    } else if (workType == "woc") {
      $(".with-us").hide();
      $(".with-other").show();
    } else {
      $(".with-us").hide();
      $(".with-other").hide();
    }
  });
  $(document).on('click', 'input[name="shop"]', function() {
    if (this.checked) {
      $(this).next('textarea').show();
    } else {
      $(this).next('textarea').hide();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="work-option">
  <label>Show your work: </label>
  <div class="options">
    <input type="radio" name="work" value="wc"> With us
    <input type="radio" name="work" value="woc"> With other
  </div>
</div>
<div class="with-us">
  <input type="hidden" name="withus" id="withus">
  <input id="work1" type="checkbox" name="shop" value="test1"> Work 1
  <textarea id="test1Description" placeholder="Description" name="shopDescription"></textarea>

  <input id="work2" type="checkbox" name="shop" value="test2"> Work 2
  <textarea id="test2Description" placeholder="Description" name="shopDescription"></textarea>

  <input id="work3" type="checkbox" name="shop" value="test3"> Work 3
  <textarea id="test3Description" placeholder="Description" name="shopDescription"></textarea>

  <input id="work4" type="checkbox" name="shop" value="test4"> Work 4
  <textarea id="test4Description" placeholder="Description" name="shopDescription"></textarea>

  <input id="work5" type="checkbox" name="shop" value="test5"> Work 5
  <textarea id="test5Description" placeholder="Description" name="shopDescription"></textarea>

  <input id="work6" type="checkbox" name="shop" value="test6"> Work 6
  <textarea id="test6Description" placeholder="Description" name="shopDescription"></textarea>
</div>
<div class="with-other">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Alternativ

You can simplify your jQuery a bit:

$(document).on('click', 'input[name="shop"]', function() {
    $(this).next('textarea').toggle(this.checked);
});

Upvotes: 3

Related Questions