How to hide checkbox label by value?-CodePudding

Have 2 identical blocks of code:

<label >
  <input  type="checkbox" value="{{$tag->id}}" name="tags[]">
  <div id="checkbox" ></div>
  <p >{{$tag->name}} ({{$tag->films->count()}})</p>
</label>

<label  value="{{$tag->id}}">
  <input  type="checkbox" value="{{$tag->id}}" name="notags[]" id="chknegative">
  <div id="checkbox" ></div>
  <p >{{$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();
        }
    });
  });

CodePudding user response：

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 >
  <input  type="checkbox" name="tags[]">
  <div ></div>
  <p >Yes, 55</p>
</label>
<label  value="{{$tag->id}}">
  <input  type="checkbox" value="{{$tag->id}}" name="notags[]" id="chknegative">
  <div ></div>
  <p >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 >
    <input  type="checkbox" name="tags[]">
    <p >Yes, 55</p>
  </label>
  <label  value="{{$tag->id}}">
    <input  type="checkbox" value="{{$tag->id}}" name="notags[]">
    <p >No</p>
  </label>
</div>
<div class='chkwrapper'>
  <label >
    <input  type="checkbox" name="tags[]">
    <p >Yes, 55</p>
  </label>
  <label  value="{{$tag->id}}">
    <input  type="checkbox" value="{{$tag->id}}" name="notags[]">
    <p >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'))
});