Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
when uncheck 2wheeler still it shows brands
view
<form class="m-t-40" method="post" action="{{url('/')}}/mechanic_brands/{{$mechanic->mechanic_id}}" enctype="multipart/form-data">
{{csrf_field()}}
<div class="form-group">
<h5>Segment<span class="text-danger">*</span></h5>
<div class="controls">
@foreach($segment as $sg)
<ul><li>
<input type="checkbox" value="{{$sg->segment_id }}" name="sg[{{$sg->segment_id }}]" id="{{$sg->segment_id }}" onclick="getBrand1(this.id)" class="test">
<label for="{{ $sg->segment_id }}">
<p>{{$sg->segment_name }}</p></label></li>
<li id="{{$sg->segment_id +10000}}" ></li>
</ul>
@endforeach
</div>
</div>
<div id="brands" >
<ul style="list-style-type:none;display: flex;" class="ck-visible">
<li>
<input type="checkbox">
</li>
</ul>
</div>
</div>
<div class="text-xs-right">
<button type="submit" class="btn btn-info">Submit</button>
<button type="reset" class="btn btn-inverse">Cancel</button>
</div>
</form>
script
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
function getBrand1(id)
{
// alert('Choose brands!');
if(document.getElementById(id).checked)
{
$.ajax({
url: 'http://localhost/partsanalysis/public/brand/Ajax/'+id,
type: "GET",
dataType: "json",
error: function(data, errorThrown)
{
console.log('request failed :'+errorThrown);
},
success:function(result) {
console.log(result);
// alert(result);
$.each(result, function(index, value) {
// console.log(result, index, value);
var newvar=parseInt(id)+parseInt(10000);
var markup = "<ul style='list-style-type:none;display: flex;margin: 0.2em; cursor: pointer; padding: 0.2em;'><li class='myip'><input style='opacity:1;position:static;' type='checkbox' name='br[" + value.brand_id + "]' value='" + value.brand_id + "'></li><li>" + value.brand_name + "</li></ul>";
// $("#brands").append(markup);
$("#"+newvar).append(markup);
});
}
});
}
else
{
$("#brands").html(" ");
}
}
</script>
This is not laravel question, but javascript or jquery question,
better you can change with 2 input drop down,
first select dropdown (single select) for 2 wheeler or 4 wheeler data
second select dropdown (multiple select) show data when first select dropdown change
sir its user requirement to use checkbox
You need an event listener to register the change in value
var checkbox = document.getElementById(id);
checkbox.addEventListener( 'change', function() {
if(this.checked) {
@sinnbeck i updated my code still it not work
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
function getBrand1(id)
{
// alert('Choose brands!');
if(document.getElementById(id).checked)
{
$.ajax({
url: 'http://localhost/partsanalysis/public/brand/Ajax/'+id,
type: "GET",
dataType: "json",
error: function(data, errorThrown)
{
console.log('request failed :'+errorThrown);
},
success:function(result) {
console.log(result);
// alert(result);
$.each(result, function(index, value) {
// console.log(result, index, value);
var newvar=parseInt(id)+parseInt(10000);
var markup = "<ul style='list-style-type:none;display: flex;margin: 0.2em; cursor: pointer; padding: 0.2em;'><li class='myip'><input style='opacity:1;position:static;' type='checkbox' name='br[" + value.brand_id + "]' value='" + value.brand_id + "'></li><li>" + value.brand_name + "</li></ul>";
// $("#brands").append(markup);
$("#"+newvar).append(markup);
});
}
});
}
else
{
//$("#brands").html("");
//$("#"+newvar).html("");
function myFunction() {
var x = document.getElementById("brands");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
}
}
</script>
$(document).on('ifChecked ifUnchecked', '#vehicle_type', function (event) {
if (event.type == 'ifChecked')
{
if ($("#vehicle_type").val() == "two_wheeler")
{
$(".stayoverenddate,.stayoverstartdate").addClass('hide'); // Add class for hide 4 wheeler option
$(".stayoverstartdate1,.stayoverstartdate2").removeClass('hide'); // remove class for hide 2 wheeler option
} else
{
// Four Wheeler
$(".stayoverenddate,.stayoverstartdate").addClass('hide'); // Add class for hide 2 wheeler option
$(".stayoverstartdate1,.stayoverstartdate2").removeClass('hide'); // remove class for hide 4 wheeler option
}
} else
{
if ($("#vehicle_type").val() == "two_wheeler")
{
$(".stayoverstartdate1,.stayoverstartdate2").removeClass('hide'); // remove class for hide 2 wheeler option
} else
{
// Four Wheeler
$(".stayoverstartdate1,.stayoverstartdate2").removeClass('hide'); // remove class for hide 4 wheeler option
}
}
});
@kanchan186 please check it , may be it will work .you have to just add relevant class name in this code
sorry sir but i am not getting this code .
updated code
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
function getBrand1(id)
{
// alert('Choose brands!');
if(document.getElementById(id).checked)
{
$.ajax({
url: 'http://localhost/partsanalysis/public/brand/Ajax/'+id,
type: "GET",
dataType: "json",
error: function(data, errorThrown)
{
console.log('request failed :'+errorThrown);
},
success:function(result) {
console.log(result);
// alert(result);
$.each(result, function(index, value) {
// console.log(result, index, value);
var newvar=parseInt(id)+parseInt(10000);
var markup = "<ul style='list-style-type:none;display: flex;margin: 0.2em; cursor: pointer; padding: 0.2em;'><li class='myip'><input style='opacity:1;position:static;' type='checkbox' name='br[" + value.brand_id + "]' value='" + value.brand_id + "'></li><li>" + value.brand_name + "</li></ul>";
// $("#brands").append(markup);
$("#"+newvar).append(markup);
});
}
});
}
else
{
var newvar=parseInt(id)+parseInt(10000);
$('#'+newvar).html("");
}
}
</script>
using this:
else
{
var newvar=parseInt(id)+parseInt(10000);
$('#'+newvar).html("");
}
getting proper output. it works
@kanchan186 tumne icheck checkbox use kia hain ?
@dipakrataniagile no sir.
ok
Please or to participate in this conversation.