[FIXED] How to hide checkbox label by value?

Issue

Have 2 identical blocks of code:

<label class="checkbox-body chkpositive tags-block mb-5">
  <input class="checkbox" type="checkbox" value="{{$tag->id}}" name="tags[]">
  <div id="checkbox" class="checkbox-block"></div>
  <p class="constructor_checkbox-text">{{$tag->name}} ({{$tag->films->count()}})</p>
</label>

<label class="checkbox-body chknegative tags-block mb-5" value="{{$tag->id}}">
  <input class="checkbox" type="checkbox" value="{{$tag->id}}" name="notags[]" id="chknegative">
  <div id="checkbox" class="checkbox-block"></div>
  <p class="constructor_checkbox-text">{{$tag->name}}</p>
</label>

They are different only in name of label classes chkpositive and chknegative, and input names

They are responsible for showing of tags which must placed in process of choise films. I need to do so that when press on tag from block chkpositive tag with identical value in block chknegative dissapeared. And vice versa when press on tag from block chknegative to disappear identical tag from chkpositive. By method "toggle" for example.

I wanted to do this with javascript and jQuery, but haven't a success. Can this issue have a simple solutions?

12 hours find for a solutions, try many codes, saw analogs with google, but don't found. Came to the conclusion that I need something similar, but working:

$(function() {
    $(".chkpositive input").click(function(event) {
        var x = $(this).is(':checked').value;
        if (x == true) {
            $(this).value.(".chknegative").hide();
        } else {
            $(this).value.(".chknegative").show();
        }
    });
  });

$(function() {
    $(".chknegative input").click(function(event) {
        var x = $(this).is(':checked').value;
        if (x == true) {
            $(this).value.(".chkpositive ").hide();
        } else {
            $(this).value.(".chkpositive ").show();
        }
    });
  });

Solution

You had the right idea.

$(this).is(':checked')

returns a boolean, so there's no .value, and

$(this).value.(".chknegative").hide()

should be just

$(".chknegative").hide()

For hide/show, the if (isTrue) hide else show can be replaced with a single toggle(isTrue)

Giving:

$(".chkpositive input").click(function(event) {
  $(".chknegative").toggle(!$(this).is(':checked'))
});
$(".chknegative input").click(function(event) {
  $(".chkpositive").toggle(!$(this).is(':checked'))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="checkbox-body chkpositive tags-block mb-5">
  <input class="checkbox" type="checkbox" name="tags[]">
  <div class="checkbox-block"></div>
  <p class="constructor_checkbox-text">Yes, 55</p>
</label>
<label class="checkbox-body chknegative tags-block mb-5" value="{{$tag->id}}">
  <input class="checkbox" type="checkbox" value="{{$tag->id}}" name="notags[]" id="chknegative">
  <div class="checkbox-block"></div>
  <p class="constructor_checkbox-text">No</p>
</label>

Now, it's unclear if you have a single pair of positive/negative or if these are in rows / multiple values. If you have multiple, the easiest option is to wrap them, then you can use

$(this).closest("wrapper").find(".chknegative")`

instead of $(".chknegative") which will find all of them across all rows.

Updated snippet for multiple +ve/-ve pairs:

$(".chkpositive input").click(function(event) {
  $(this).closest(".chkwrapper").find(".chknegative").toggle(!$(this).is(':checked'))
});
$(".chknegative input").click(function(event) {
  $(this).closest(".chkwrapper").find(".chkpositive").toggle(!$(this).is(':checked'))
});

p.constructor_checkbox-text { display:inline-block; }
.chkwrapper + .chkwrapper { border-top:1px solid rebeccapurple }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='chkwrapper'>
  <label class="checkbox-body chkpositive tags-block mb-5">
    <input class="checkbox" type="checkbox" name="tags[]">
    <p class="constructor_checkbox-text">Yes, 55</p>
  </label>
  <label class="checkbox-body chknegative tags-block mb-5" value="{{$tag->id}}">
    <input class="checkbox" type="checkbox" value="{{$tag->id}}" name="notags[]">
    <p class="constructor_checkbox-text">No</p>
  </label>
</div>
<div class='chkwrapper'>
  <label class="checkbox-body chkpositive tags-block mb-5">
    <input class="checkbox" type="checkbox" name="tags[]">
    <p class="constructor_checkbox-text">Yes, 55</p>
  </label>
  <label class="checkbox-body chknegative tags-block mb-5" value="{{$tag->id}}">
    <input class="checkbox" type="checkbox" value="{{$tag->id}}" name="notags[]">
    <p class="constructor_checkbox-text">No</p>
  </label>
</div>

(be sure not to duplicate any IDs)

---

EDIT

In the case where there's more than one, you can match them using the name attribute, eg:

$(".chknegative[name=" + this.value + "])"

Such as:

$(".chknegative[value='" + $(this).attr("value") + "']").toggle(!$(this).is(':checked'))

In this case, you may also want to check the related +ve (or -ve) checkboxes as well.

eg if you have 3 +ves and 3 -ves for "valueX" and tick any of +ves, then hide the 3 -ves and tick the remaining 2 +ves, eg:

// when positive clicked
$(".chkpositive input").click(function(event) {

  // show/hide negatives
  $(".chknegative[value='" + $(this).attr("value") + "']").toggle(!$(this).is(':checked'))

  // also tick/untick matching positives
  $(".chkpositive[value='" + $(this).attr("value") + "']").prop("checked", $(this).is(':checked'))
});

Answered By - freedomn-m

Answer Checked By - Senaida (PHPFixing Volunteer)