I would like to stop a function so it can run multiple times on one page. It is some radio buttons which i would like to be cleared if a checkbox is clicked. It should work with an infinite number of products. I'm the worst on javascript so i hope i could get an answer?
Sample:
$('.product .question-input').change(function() {
if ($(this).is(':checked')) { //radio is now checked
$('.product .question-checkbox').prop('checked', false);
}
return false;
});
$('.product .question-checkbox').change(function() {
if ($(this).is(':checked')) {
$('.product .question-input').prop('checked', false);
}
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product">
<div class="form-inline justify-content-center">
<div class="container text-center">
<div class="product-title">Adobe</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">1
<input class="form-check-input question-input" type="radio" name="test-1" id="test-1" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">2
<input class="form-check-input question-input" type="radio" name="test-1" id="test-2" value="2"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">3
<input class="form-check-input question-input" type="radio" name="test-1" id="test-3" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">4
<input class="form-check-input question-input" type="radio" name="test-1" id="test-4" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">5
<input class="form-check-input question-input" type="radio" name="test-1" id="test-5" value="1"></label></div>
</div>
</div>
<div class="form-group form-check text-center the-checkbox">
<input type="checkbox" name="check-1" class="form-check-input question-checkbox" id="check-1">
<label class="form-check-label" for="check-1">I don't use this product for work</label>
</div>
</div>
</div>
<div class="product">
<div class="form-inline justify-content-center">
<div class="container text-center">
<div class="product-title">Mocups</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">1
<input class="form-check-input question-input" type="radio" name="test-2" id="test-1" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">2
<input class="form-check-input question-input" type="radio" name="test-2" id="test-2" value="2"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">3
<input class="form-check-input question-input" type="radio" name="test-2" id="test-3" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">4
<input class="form-check-input question-input" type="radio" name="test-2" id="test-4" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">5
<input class="form-check-input question-input" type="radio" name="test-2" id="test-5" value="1"></label></div>
</div>
</div>
<div class="form-group form-check text-center the-checkbox">
<input type="checkbox" name="check-1" class="form-check-input question-checkbox" id="check-1">
<label class="form-check-label" for="check-1">I don't use this product for work</label>
</div>
</div>
</div>
Functions are reusable, self-contained pieces of code that are called with a single command. They can be designed to accept arguments as input and return values, but they don't need to do either.
Another essential concept in coding is functions, which allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times.
In JavaScript, we can divide up our code into reusable parts called functions . You can call or invoke this function by using its name followed by parentheses, like this: functionName(); Each time the function is called it will print out the message Hello World on the dev console.
By passing a reference to a handler instead of directly passing the handler function:
function handler() {
if ($(this).is(':checked')) {
$('.product .question-input').prop('checked', false);
}
return false;
}
$('.product .question-input').change(handler);
$('.product .question-checkbox').change(handler);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With